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>
