主要是设置div的样式为:width:100%;height:100%;display: block;
<style>.layui-tab-item{width:100%;height:480px;}
</style><div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief"><ul class="layui-tab-title"><li class="layui-this">硫磺固体出入库</li><li onclick="clickYeti()">硫磺液体出入库</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" style=""><!-- 固体硫磺 出入库,曲线图 --><div id="sufulrSolidChart" style="width:100%;height:100%;display: block; " lay-ignore></div></div><div class="layui-tab-item" style=""><!-- 硫磺液体出入库,曲线图 --><div id="liquidSufulrChart" style=" width:100%;height:100%;display: block; " lay-ignore></div></div></div></div>
<script src="~/echarts/echarts.min.js"></script><script type="text/javascript">var pageConfig = {urls: { // 固体硫磺曲线图sulfur: "/Home/SulftDataByDay"//液体硫磺曲线图, sulfurLiquid: "/Home/LiquitSulftDataByDay"}};layui.use(['laydate','form'], function () {var $ = layui.$, form = layui.form, laydate = layui.laydate;// 渲染laydate.render({elem: '#start'});laydate.render({elem: '#end'});});!function () {//固体硫磺曲线function loadDataSulfur() {var start = $("#start").val();var end = $("#end").val();$.ajax({url: pageConfig.urls.sulfur,type: "post",data: {start: start, end: end},success: function (r) {suflurByDayLines(r.inData, r.outData);}});}//固体硫磺每天出库、入库,function suflurByDayLines(inData, outData) {//document.getElementById('sufulrSolidChart').removeAttribute("_echarts_instance_");var chartDom = document.getElementById('sufulrSolidChart');var myChart = echarts.init(chartDom);var option = {//grid: {// width: '1000px' //设置宽度为父容器宽度的90%//},// width: containerWidth+"px", //设置宽度为父容器宽度的90%//width:'1000px',title: {text: '固体硫磺每天出库、入库(吨)'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',nameLocation: 'middle'},yAxis: {name: '硫磺库存数量'},series: [{name: '硫磺出库',type: 'line',data: outData,showSymbol: false,},{name: '硫磺入库',type: 'line',data: inData,showSymbol: false,}]};myChart.setOption(option);}//液体硫磺,每天出入库function suflurLiquidByDayLines(inData2, outData2) {//$("#liquidSufulrChart").html("");//解决echarts 无法渲染问题document.getElementById('liquidSufulrChart').removeAttribute("_echarts_instance_");var chartDom2 = document.getElementById('liquidSufulrChart');var myChart2 = echarts.init(chartDom2);console.log(778, '------------');console.log(inData2);console.log(outData2);var option = {title: {text: '液体硫磺每天出库、入库(吨)'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',nameLocation: 'middle'},yAxis: {name: '硫磺库存数量'},series: [{name: '硫磺出库',type: 'line',data: outData2,showSymbol: false,},{name: '硫磺入库',type: 'line',data: inData2,showSymbol: false,}]};myChart2.setOption(option);}//液体硫磺function loadLiquidSulfur() {var start = $("#start").val();var end = $("#end").val();$.ajax({url: pageConfig.urls.sulfurLiquid,type: "post",data: {start: start, end: end},success: function (r) {suflurLiquidByDayLines(r.inData, r.outData);}});}loadDataSulfur();//点击查询window.loadChart = function () {//液体硫磺,是否隐藏var isHide = $("#liquidSufulrChart").is(":hidden");if (isHide) {loadDataSulfur();} else {loadLiquidSulfur();}}//点击液体硫磺,var isClickedYeti = false;window.clickYeti = function () {if (isClickedYeti == false) {loadLiquidSulfur();}isClickedYeti = true;}}();</script>