<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
color: ['#8EC9EB'],
legend: {
data: ['高度(km)与气温(°C)变化关系']
},
tooltip: {
trigger: 'axis',
formatter: "Temperature : <br/>{b}km : {c}°C"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
formatter: '{value} °C'
}
},
yAxis: {
type: 'category',
axisLine: {
onZero: false
},
axisLabel: {
formatter: '{value} km'
},
boundaryGap: true,
data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
},
graphic: [{
type: 'image',
id: 'logo',
right: 20,
top: 20,
z: -10,
bounding: 'raw',
origin: [75, 75],
style: {
image: 'http://echarts.baidu.com/images/favicon.png',
width: 150,
height: 150,
opacity: 0.4
}
},
{
type: 'group',
rotation: Math.PI / 4,
bounding: 'raw',
right: 110,
bottom: 110,
z: 100,
children: [{
type: 'rect',
left: 'center',
top: 'center',
z: 100,
shape: {
width: 400,
height: 50
},
style: {
fill: 'rgba(0,0,0,0.3)'
}
},
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: '#fff',
text: 'ECHARTS BAR CHART',
font: 'bold 26px Microsoft YaHei'
}
}
]
},
{
type: 'group',
left: '10%',
top: 'center',
children: [{
type: 'rect',
z: 100,
left: 'center',
top: 'middle',
shape: {
width: 190,
height: 90
},
style: {
fill: '#fff',
stroke: '#555',
lineWidth: 2,
shadowBlur: 8,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowColor: 'rgba(0,0,0,0.3)'
}
},
{
type: 'text',
z: 100,
left: 'center',
top: 'middle',
style: {
fill: '#333',
text: [
'横轴表示温度，单位是°C',
'纵轴表示高度，单位是km',
'右上角有一个图片做的水印',
'这个文本块可以放在图中各',
'种位置'
].join('\n'),
font: '14px Microsoft YaHei'
}
}
]
}
],
series: [{
name: '高度(km)与气温(°C)变化关系',
type: 'bar',
smooth: true,
barCategoryGap: 25,
lineStyle: {
normal: {
width: 3,
shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 10,
shadowOffsetY: 10
}
},
data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
}]
};
var rotation = 0;
setInterval(function() {
myChart.setOption({
graphic: {
id: 'logo',
rotation: (rotation += Math.PI / 360) % (Math.PI * 2)
}
});
}, 30);
myChart.setOption(option);
</script>
</body>
</html>
