107 lines
2.3 KiB
HTML
107 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="GB2312">
|
|||
|
|
<title>ECharts</title>
|
|||
|
|
<!-- <20><><EFBFBD><EFBFBD> echarts.js -->
|
|||
|
|
<script src="echarts/echarts.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
html,body {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
width: 800px;
|
|||
|
|
height: 400px;
|
|||
|
|
margin: 0 auto; /*ˮƽ<CBAE><C6BD><EFBFBD><EFBFBD>*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="main" class="content"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// <20><><EFBFBD><EFBFBD><EFBFBD><D7BC><EFBFBD>õ<EFBFBD>dom<6F><6D><EFBFBD><EFBFBD>ʼ<EFBFBD><CABC>echartsʵ<73><CAB5>
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'cross',
|
|||
|
|
crossStyle: {
|
|||
|
|
color: '#999'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
feature: {
|
|||
|
|
dataView: {show: true, readOnly: false},
|
|||
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|||
|
|
restore: {show: true},
|
|||
|
|
saveAsImage: {show: true}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'δ<><CEB4><EFBFBD><EFBFBD>']
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['1<><31>', '2<><32>', '3<><33>', '4<><34>', '5<><35>', '6<><36>', '7<><37>', '8<><38>', '9<><39>', '10<31><30>', '11<31><31>', '12<31><32>'],
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>',
|
|||
|
|
min: 0,
|
|||
|
|
max: 1000,
|
|||
|
|
interval: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value} <20><>'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>',
|
|||
|
|
min: 0,
|
|||
|
|
max: 1000,
|
|||
|
|
interval: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value} <20><>'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [320, 450, 480, 550, 580, 611, 650, 655, 800, 835, 900, 920]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'δ<><CEB4><EFBFBD><EFBFBD>',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [100, 89, 250, 120, 223, 285, 54, 100, 325, 220, 150, 130]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ʹ<>ø<EFBFBD>ָ<EFBFBD><D6B8><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʾͼ<CABE><CDBC><EFBFBD><EFBFBD>
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|