<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.con{
position: absolute;
width: 505px;
height:260px;
/* background-color: aquamarine; */
}
.con-po{
position: absolute;
width: 2px;
height: 134px;
background-color: #cecece;
top: 39px;
right: 157px;
}
.con-r{
position: absolute;
top: 2px;
left: 148px;
color: #717171;
}
.con-num{
position: relative;
top: 39px;
left: 148px;
color: #717171;
font-size: 14px;
}
.con-bg{
position: relative;
background-color: aqua;
width: 90%;
height: 90%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
select{
color: #808080;
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div class="con">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div id="main" style="width:100%;height: 100%;"></div>
</div>
<script src="js/echarts.min.js"></script>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: { //图表的上下左右的距离
left: '0%',
right: '13%',
bottom: '10%',
top: '8%',
padding: '0 0 0 0',
containLabel: true,
},
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
},
legend: {},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
},
yAxis: {
type: 'category',
data: ['征拆', '地连墙', '土方开挖', '主体结构'],
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: true ,
textStyle: {
color: '#666',
fontSize: 14,
}},
},
series: [
{
label: {
show: true,
position: [400, 10],
valueAnimation: true
},
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{ offset: 0, color: '#006CD9' },
{ offset: 1, color: '#66B2FE' }
]
),
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
type: 'bar',
data: [18444882, 23, 290, 104 ]
},
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
