如何让eChart响应式？

Question

我从来没有真正使用过 JavaScript 所以我可能在做一些愚蠢的事情。但出于某种原因，我使用的 echart 没有响应 div 根据屏幕尺寸调整大小的方式。我将 bootstrap 用于 CSS。

我想我已经正确地遵循了 the official documentation 上的文档。

但对我来说，它不会调整大小或似乎固定到 div。

<div class="col-sm-12 col-md-3 col-lg-3 col-xl-2">
    <div class="card custom-card">
        <div class="card-body">
            <div class="card-item">
                <div class="card-item-icon card-icon">
                    <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect height="14" opacity=".3" width="14" x="5" y="5"/><g><rect fill="none" height="24" width="24"/><g><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/><rect height="5" width="2" x="7" y="12"/><rect height="10" width="2" x="15" y="7"/><rect height="3" width="2" x="11" y="14"/><rect height="2" width="2" x="11" y="10"/></g></g></g></svg>
                </div>
                <div class="card-item-title mb-2">
                    <label class="main-content-label tx-13 font-weight-bold mb-1">Chart</label>
                    <span class="d-block tx-12 mb-0 text-muted">Current</span>
                </div>
                <div class="card-item-body">
                    <div class="card-item-stat">
                        <div id="main" style="width: 200px;height:200px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

option = {
    series: [
        {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 4,

            axisLine: {
                lineStyle: {
                    width: 6,
                    color: [
                        [0.33, '#FF6E76'],
                        [0.66, '#FDDD60'],
                        [0.75, '#58D9F9'],
                        [1, '#7CFFB2']
                    ]
                }
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '50%',
                width: 20,
                offsetCenter: [0, '-30%'],
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {
                length: 12,
                lineStyle: {
                    color: 'auto',
                    width: 2
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                    color: 'auto',
                    width: 2
                }
            },
            axisLabel: {
                color: '#464646',
                fontSize: 10,
                distance: -60,
                formatter: function (value) {
                    if (value === 0.875) {
                        return 'A';
                    } else if (value === 0.625) {
                        return 'B';
                    } else if (value === 0.375) {
                        return 'C';
                    } else if (value === 0.125) {
                        return 'D';
                    }
                    return '';
                }
            },
            title: {
                offsetCenter: [0, '-20%'],
                fontSize: 30
            },
            detail: {
                fontSize: 15,
                offsetCenter: [0, '0%'],
                valueAnimation: true,
                formatter: function (value) {
                    return Math.round(value * 100) + '分';
                },
                color: 'auto'
            },
            data: [
                {
                    value: 0.7,  
                }
            ]
        }
    ]
};

option && myChart.setOption(option);

Answer 1

您的 <svg> 元素具有固定的宽度和高度属性。
删除这些将使您的 svg 根据父元素的大小调整大小：

.card-icon{
  width:50%;
  position:relative;
  resize:both;
  overflow:auto;
  border: 1px solid #ccc;
}

<div class="card-item-icon card-icon">
  <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
    <g>
      <rect height="14" opacity=".3" width="14" x="5" y="5" />
      <g>
        <rect fill="none" height="24" width="24" />
        <g>
          <path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z" />
          <rect height="5" width="2" x="7" y="12" />
          <rect height="10" width="2" x="15" y="7" />
          <rect height="3" width="2" x="11" y="14" />
          <rect height="2" width="2" x="11" y="10" />
        </g>
      </g>
    </g>
  </svg>
</div>
<p>Try resizing</p>

如何让eChart响应式？

How to make eChart responsive?

javascript

echarts