| | |
|---|
| | | canvas { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | #sidebar{ |
|---|
| | | /*定位*/ |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 1%; |
|---|
| | | transform: translateY(-50%); |
|---|
| | | width: 20%; |
|---|
| | | height: 95%; |
|---|
| | | /*特效*/ |
|---|
| | | background: rgba(255,255,255,0.3); |
|---|
| | | border-radius: 5px; |
|---|
| | | color: #f0f8ff; |
|---|
| | | } |
|---|
| | | #sidebar h1{ |
|---|
| | | font-family: Fantasy; |
|---|
| | | font-size: 36px; |
|---|
| | | text-indent: 5%; |
|---|
| | | } |
|---|
| | | #baobiao1{ |
|---|
| | | width: 400px; |
|---|
| | | height: 300px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <body style="position: relative"> |
|---|
| | | <div id="sidebar"> |
|---|
| | | <h1>中扬-立体仓库</h1> |
|---|
| | | <div id="baobiao1"></div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div id="container"></div> |
|---|
| | | <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var dom = document.getElementById("baobiao1"); |
|---|
| | | var myChart = echarts.init(dom); |
|---|
| | | var app = {}; |
|---|
| | | |
|---|
| | | var option; |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [120, 200, 150, 80, 70, 110, 130], |
|---|
| | | type: 'bar' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | option && myChart.setOption(option); |
|---|
| | | |
|---|
| | | |
|---|
| | | // option = { |
|---|
| | | // title: { |
|---|
| | | // text: '年度进/出货量', |
|---|
| | | // textStyle:{ |
|---|
| | | // color:'#F8F8FF', |
|---|
| | | // }, |
|---|
| | | // subtext: 'Data', |
|---|
| | | // subtextStyle:{ |
|---|
| | | // color:'#F8F8FF', |
|---|
| | | // }, |
|---|
| | | // show: true, |
|---|
| | | // |
|---|
| | | // }, |
|---|
| | | // textStyle:{ |
|---|
| | | // color:'#F8F8FF', |
|---|
| | | // }, |
|---|
| | | // // subtextStyle:{ |
|---|
| | | // // color:'#F8F8FF', |
|---|
| | | // // }, |
|---|
| | | // // tooltip: { |
|---|
| | | // // trigger: 'axis' |
|---|
| | | // // }, |
|---|
| | | // legend: { |
|---|
| | | // show:false, |
|---|
| | | // data: ['进货', '出货'] |
|---|
| | | // }, |
|---|
| | | // toolbox: { |
|---|
| | | // show: false, |
|---|
| | | // feature: { |
|---|
| | | // dataView: { show: true, readOnly: false }, |
|---|
| | | // magicType: { show: true, type: ['line', 'bar'] }, |
|---|
| | | // restore: { show: true }, |
|---|
| | | // saveAsImage: { show: true } |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // calculable: true, |
|---|
| | | // xAxis: [ |
|---|
| | | // { |
|---|
| | | // type: 'category', |
|---|
| | | // // prettier-ignore |
|---|
| | | // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // yAxis: [ |
|---|
| | | // { |
|---|
| | | // // show:false, |
|---|
| | | // 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: 'Max' }, |
|---|
| | | // { type: 'min', name: 'Min' } |
|---|
| | | // ] |
|---|
| | | // }, |
|---|
| | | // markLine: { |
|---|
| | | // data: [{ type: 'average', name: 'Avg' }] |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // 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: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, |
|---|
| | | // { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 } |
|---|
| | | // ] |
|---|
| | | // }, |
|---|
| | | // markLine: { |
|---|
| | | // data: [{ type: 'average', name: 'Avg' }] |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // ], |
|---|
| | | // |
|---|
| | | // }; |
|---|
| | | // |
|---|
| | | // if (option && typeof option === 'object') { |
|---|
| | | // myChart.setOption(option); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | <script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/Warehouse.js"></script> |
|---|
