echarts宽度如何设为百分比

前言

• 问题 : 有八个饼状图要展示，其中一行展示两个饼状图。一开始是固定了宽度为450px，但到了宽屏上一行就会展示三个。
  
• 思路：于是想当然的想到将 width 设为 百分比，继承父组件的宽度。但是改完之后图缩到了一起，网上查了查，发现echarts源码中，计算宽度的时候将 100% parseInt -> 100px, 所以比如我改成了45%, 就会显示为 45px。
• 解决：最后查了各种博客，得到了解决方法，就是根据别的组件宽度来动态改变echarts图标的宽度。

代码

var width = $("#tabitem2").width()*0.45;
$("#mainPay").css("width", width);
$("#mainDetail").css("width", width);
$("#main").css("width", width);
$("#mainItem").css("width", width);
$("#mainBehavior").css("width", width);
$("#mainBehaviorPay").css("width", width);
$("#mainDepartment").css("width", width);
$("#mainDoctor").css("width", width);

var myChartPay = echarts.init(document.getElementById('mainPay'));
var myChartDetail = echarts.init(document.getElementById('mainDetail'));
var myChartDepartment = echarts.init(document.getElementById('mainDepartment'));
var myChart = echarts.init(document.getElementById('main'));
var myChartItem = echarts.init(document.getElementById('mainItem'));
var myChartDoctor = echarts.init(document.getElementById('mainDoctor'));
var myChartBehavior = echarts.init(document.getElementById('mainBehavior'));
var myChartBehaviorPay = echarts.init(document.getElementById('mainBehaviorPay'));

• 说明：
  这里 有个 div class=tabitems ，将宽度设置为 0.45倍的它。
  然后对八个图表设置宽度为width。因为 tabitem2的宽度是动态的，所以每次随着屏幕宽度改变，都会重新计算这个宽度然后赋值。