index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="charts-box">
<div id="charts-left"></div>
<div id="charts-right"></div>
</div>
<script src="http://youku3d.com/smart3d/lib/echarts.js"></script>
<script>
//饼状图
var myChartLeft = echarts.init(document.getElementById('charts-left'));
myChartLeft.setOption({
legend: {//legend图例
orient: 'vertical',//方向:“垂直”
left: 'left',
textStyle: {color: '#FFFFFF'},
},
series: [
{
type: 'pie',//饼图
radius: '90%',//饼图的半径大小
center: ['65%', '50%'],//饼图的位置
label: { //饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 400,
fontSize: 13 //文字的字体大小
},
formatter: '{d}%'//formatter
}
},
data: [
{value: 43, name: '危险源1', itemStyle: {normal: {color: '#82E755'}}},
{value: 19, name: '危险源2', itemStyle: {normal: {color: '#FFF000'}}},
{value: 10, name: '危险源3', itemStyle: {normal: {color: '#FF9E35'}}},
{value: 28, name: '危险源4', itemStyle: {normal: {color: '#EE5835'}}}
]
}
]
});
//柱状图
var myChartRight = echarts.init(document.getElementById('charts-right'));
myChartRight.setOption({
grid: {
show: false,
top: 17,
bottom: 30
},
xAxis: {
type: 'category',
data: ['数据', '数据', '数据', '数据', '数据'],
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
series: [
{
data: [3.5, 0.9, 2.8, 2.3, 5.2],
type: 'bar',
itemStyle: {
color: '#539FD4'
}
}
]
});
</script>
</body>
</html>
style.css
.charts-box {
background-color: rgba(56, 53, 50, 0.6);
}
.charts-box #charts-left {
width: 264px;
height: 196px;
border-right: 1px solid rgba(150, 150, 150, 0.6);
}
.charts-box #charts-right {
width: 215px;
height: 196px;
}