echarts 柱状图 window.onresize
9 <!DOCTYPE html> 10 <html lang="en"> 11 12 <head> 13 <meta charset="UTF-8"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <title>Document</title> 17 <script src="./echarts/echarts.min.js"></script> 18 <style> 19 .container { 20 width: 31.25vw; 21 margin: 0 auto; 22 height: 79.6296vh; 23 background: pink; 24 } 25 26 .aa { 27 width: 100%; 28 height: 100%; 29 } 30 </style> 31 </head> 32 33 <body> 34 <div class="container"> 35 <div class="aa" id="main"></div> 36 </div> 37 38 <script> 42 var myChart = echarts.init(document.getElementById('main')); 43 44 // 指定图表的配置项和数据 45 var option = { 46 title: { 47 text: 'ECharts 入门示例' 48 }, 49 tooltip: {}, 50 legend: { 51 data: ['销量'] 52 }, 53 xAxis: { 54 data: [] 55 }, 56 yAxis: {}, 57 series: [ 58 { 59 name: '销量', 60 type: 'bar', 61 data: [] 62 } 63 ] 64 }; 65 66 // 使用刚指定的配置项和数据显示图表。 67 // myChart.setOption(option); 68 function getData() { 69 var datax = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']; 70 var datay = [5, 20, 36, 10, 10, 20]; 71 option.xAxis.data = datax; 72 option.series[0].data = datay; 73 myChart.setOption(option); //加载数据图表 74 // 或者如下赋值 75 // myChart.setOption({ //加载数据图表 76 // xAxis: { 77 // data: datax 78 // }, 79 // series: { 80 // data:datay 81 // } 82 // }); 83 84 } 85 getData(); 86 // echart图跟随屏幕自适应变化 87 window.onresize = function () { 88 myChart.resize(); 89 } 90 </script> 91 92 </body> 93 94 </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库