ECharts-通过window.print创建的A4尺寸pdf文件中的饼图更具响应性

问题描述

我想将饼图集中在框中，并在调整窗口大小时使其响应更快。目前，它不在框内居中，单词被截断并且在视图中也没有响应。

ReportResult.jsx

<div className="col-md-6 m-t-10">
  <div className="report-tab-chart-sub">
    <h3 className="report-tab-chart-title">Operating Expenses</h3>
    <div className="operating-chart">
      <ReactEcharts className="echarts-margin"
        option={{
          series: [{
            type: 'pie',radius: ['50%','70%'],center: ['50%','50%'],selectedMode: 'single',data: [
              {
                value: chartManagefee,itemStyle: {color: '#1d7ff0'},label: {
                  formatter: [
                    '{title1|{c}%}','{title2|Property management fee}','{br|}'
                  ].join('\n'),rich: {
                    title1: {
                      align: 'left',fontSize: '14'
                    },title2: {
                      color: '#999999',align: 'left',fontSize: '14'
                    }
                  }
                }
              },{
                value: chartWaterbill,itemStyle: {color: '#cd78f1'},'{title2|Water bill}',rich: {
                    title1: {
                      align: 'right',align: 'right',{
                value: chartUtilities,itemStyle: {color: '#bde955'},'{title2|Utilities}',{
                value: chartTaxes,itemStyle: {color: '#7be1b1'},'{title2|Taxes}',{
                value: chartpestcontrol,itemStyle: {color: '#f0a808'},'{title2|Trash Removal/pest Control/}','{title3|Landscaping}',title3: {
                      color: '#999999',{
                value: chartInsurance,itemStyle: {color: '#fc5532'},'{title2|Insurance}',fontSize: '14'
                    }
                  }
                }
              }
            ]
          }]
        }}
      />
    </div>
  </div>
</div>

style.css

@page { 
    size: A4;  
    /* margin: 10mm;  */
} 
@media print { 
    body { -webkit-print-color-adjust: exact; }
    #controlled-tab-example-tabpane-propertyinfo,#controlled-tab-example-tabpane-comps { display: block; }
    .header-set-bg-img,.footer,.no-print-button {display: none;}
    .col-md-6 {
        width: 460px !important;
    }
    .page-break {
        page-break-before: always;
    }
    img.static_map {
        display: block;
    }
    .googleMap{
        display: none;
    }
    .echarts-for-react{
        position: relative;
    }
    .echarts-for-react,.echarts-for-react > div {
        width:450px!important;
        height: auto !important;
    }
    .echarts-for-react > div > canvas {
        display: block !important;
        width: 100% !important;
        max-width:100% !important;
        height: auto !important;
    }

    @media(max-width:1400px){
        .echarts-for-react,.echarts-for-react > div {
            height:200px!important;
        }
        .echarts-for-react > div > canvas{
            height:100%!important;
            /* width:auto!important; */
            left:10px!important;
        }
    }

    .line-chart {
        height: 300px !important;
        width: 400px !important;
    }

    .line-chart > div > canvas {
        width: 400px !important;
        height: 230px !important;
    }
}
.print-page-break {
    page-break-before: always;
}
.operating-chart > div canvas{
    width: auto !important;
    text-align: center !important;
}

在这里，我已经使用echart/echarts-for-react包生成了饼图。我在echart/echarts-for-react内的setoption中检查了道具，但没有任何使图表更具响应性和居中的工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）