在JavaScript中加入:
/*窗口自适应,关键代码*/ window.onresize = function() { if ($('#echarts14').length > 0) { myChart14.resize(); } };
1.Html
<div> <div id="echarts14"></div> </div>
2.JavaScript
var myChart14; if ($('#echarts14').length > 0) { myChart14 = echarts.init(document.getElementById('echarts14')); } /* 第14个图表的配置--销售额同比图 --柱状图*/ var option14 = { title: [{ text: '销售额同比图', left: 'left', textStyle: { color: '#4c4c4c', fontWeight: "bold", fontSize: 14, }, }, { text: '单位:(元)', left: 'right', textStyle: { color: '#929292', fontWeight: "normal", fontSize: 12, }, }], color: ['#01b8aa', '#FFB581'], legend: { data: ['2018年05月_同期', '2019年05月_本期'], bottom: 0 }, toolbox: { show: true, //是否显示工具箱 right: 70, top: -8, //要显示的工具箱内容 feature: { saveAsImage: { //保存为图片 show: true }, } }, grid: { top: '30', left: '1%', right: '1%', bottom: '40', containLabel: true, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: { type: 'category', data: ['总额', '汽油', '柴油'], axisTick: { show: false, }, axisLabel: { interval: 0 }, }, yAxis: { axisTick: { show: false, } }, series: [{ type: 'bar', barWidth: '10%', barGap: '80%', /*多个并排柱子设置柱子之间的间距*/ name: '2018年05月_同期', data: [1203.29, 2489.34, 2904.7], }, { type: 'bar', barWidth: '10%', name: '2019年05月_本期', data: [1303.29, 2489.33, 3904.7], } ] }; myChart14 && myChart14.setOption(option14, true); /*窗口自适应,关键代码*/ window.onresize = function() { if ($('#echarts14').length > 0) { myChart14.resize(); } };