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>

 

posted @ 2022-03-17 18:28  蓝色精灵jah  阅读(196)  评论(0)    收藏  举报