效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app" style="height:300px;"></div> <div id="fun"></div> <script src="../js/echarts.js"></script> <script> let option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "line" // 默认为直线，可选为：'line' | 'shadow' } }, legend: { show: false }, grid: { top: "10", left: "70", right: "30", bottom: "30" }, xAxis: [ { type: "category", data: ["数据依赖", "执行级别", "性别", "级别", "测试类型"] } ], yAxis: [ { type: "value" } ], series: [ { name: "是", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[0, 50]] }, { name: "否", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[0, 88]] }, { name: "初级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[1, 99]] }, { name: "中级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[1, 40]] }, { name: "高级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[1, 33]] }, { name: "男", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[2, 88]] }, { name: "女", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[2, 88]] }, { name: "一级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[3, 88]] }, { name: "二级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[3, 98]] }, { name: "三级", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[3, 58]] }, { name: "黑盒", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[4, 88]] }, { name: "白盒", type: "bar", stack: "属性", label: { show: true, formatter: "{a}" }, data: [[4, 88]] } ] }; let option1 = { title: { text: "蒸发量和降水量", subtext: "纯属虚构" }, tooltip: { trigger: "axis" }, legend: { data: ["蒸发量", "降水量"] }, toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ["line", "bar"] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ] } ], yAxis: [ { type: "value" } ], series: [ { name: "蒸发量", type: "bar", data: [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 ], markPoint: { data: [ { type: "max", name: "最大值" }, { type: "min", name: "最小值" } ] }, markLine: { data: [{ type: "average", name: "平均值" }] } }, { name: "降水量", type: "bar", data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ], markPoint: { data: [ { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 }, { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 } ] }, markLine: { data: [{ type: "average", name: "平均值" }] } } ] }; // 初始化echarts 宽高 function initCharts() { let app = document.getElementById("app"); let WholeWidth = window.innerWidth - 56; app.style.width = WholeWidth + "px"; let fun = document.getElementById("fun"); let HalfWidth = window.innerWidth / 2 - 20; fun.style.width = HalfWidth + "px"; fun.style.height = HalfWidth * 0.75 + "px"; //初始化 数值 myChart = echarts.init(app); myChart.setOption(option); myChart1 = echarts.init(fun); myChart1.setOption(option1); } initCharts(); //页面加载后 执行一次 // 方法1: 浏览器 reaize 事件 页面大小改变【 window.onresize 后者会覆盖前者 只能执行1次】 // window.onresize = function() { // console.log("1"); // }; // window.onresize = function() { // console.log("2"); // }; //*****************执行结果只有 2 // 方法2: 添加 监听浏览器 reaize 事件 页面大小改变【不会被后者覆盖 都会执行 】 window.addEventListener("resize", function() { console.log("1"); initCharts(); // 重新初始化echarts 画布大小 myChart.resize(); //重绘 myChart1.resize(); //重绘 }); // window.addEventListener("resize", function() { // console.log("2"); // }); //*****************执行结果1 2 </script> </body> </html>
