141 lines
4.3 KiB
HTML
141 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=1" />
|
||
<title></title>
|
||
<style>
|
||
/*body {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}*/
|
||
|
||
#main {
|
||
/*position: absolute;*/
|
||
/*top: 10px;*/
|
||
/*left: 10px;*/
|
||
/*width: 700px;*/
|
||
/*height: 650px;*/
|
||
/*background: #fff;*/
|
||
}
|
||
|
||
/*.code-panel {
|
||
position: fixed;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 200px;
|
||
border: 2px solid #555;
|
||
}
|
||
|
||
.code-line {
|
||
margin: 15px 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.code-line textarea {
|
||
width: 190px;
|
||
height: 80px;
|
||
margin-bottom: 5px;
|
||
}*/
|
||
</style>
|
||
<script src="../Scripts/jquery-1.10.2.min.js"></script>
|
||
<script src="../Scripts/echarts-4.8.0/dist/echarts.simple.min.js"></script>
|
||
<!--<script src="../Scripts/echarts-4.8.0/dist/echarts.min.js"></script>-->
|
||
</head>
|
||
<body>
|
||
<div id="main"></div>
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
//var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
// 指定图表的配置项和数据
|
||
//var option = {
|
||
// title: {
|
||
// text: 'ECharts 入门示例'
|
||
// },
|
||
// tooltip: {},
|
||
// legend: {
|
||
// data: ['销量']
|
||
// },
|
||
// xAxis: {
|
||
|
||
// },
|
||
// yAxis: {
|
||
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "袜子2", "袜子3", "袜子4", "袜子5"]
|
||
// },
|
||
// series: [{
|
||
// name: '销量',
|
||
// type: 'bar',
|
||
// data: [5, 20, 36, 10, 10, 20, 20, 30, 40, 50]
|
||
// }]
|
||
//};
|
||
|
||
//require([
|
||
// 'echarts'
|
||
//], function (echarts) {
|
||
|
||
$(function () {
|
||
var width = document.documentElement.clientWidth;
|
||
var height = document.documentElement.clientHeight;
|
||
$("#main").css("width", width).css("height", height);
|
||
|
||
//console.log(width);
|
||
//console.log(height);
|
||
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var option = {
|
||
baseOption: {
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
borderWidth: 0
|
||
},
|
||
xAxis: {
|
||
type: 'value', name: '万元'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ["01", "02", '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
|
||
},
|
||
//legend: {
|
||
// data: ['销量']
|
||
//},
|
||
series: [
|
||
{ name: '销量', type: 'bar', data: [50, 100, 150, 200, 250, 300, 200, 350, 150] }
|
||
]
|
||
},
|
||
media: [{
|
||
query: { minWidth: 350, maxWidth: 550 },
|
||
option: {
|
||
//legend: {
|
||
// orient: 'vertical',
|
||
// left: 'right',
|
||
// itemGap: 10
|
||
//},
|
||
//xAxis: {
|
||
// splitNumber: 2
|
||
//},
|
||
}
|
||
}],
|
||
//options: [{
|
||
// series: [{
|
||
// data: [5, 20, 36, 10, 10, 20, 20, 30, 40, 50]
|
||
// }]
|
||
//}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
//console.log(myChart.resize);
|
||
window.onresize = myChart.resize;
|
||
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |