效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/extension/dataTool.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
var weatherIcons = {
'Sunny': './data/weather/sunny_128.png',
'Cloudy': './data/weather/cloudy_128.png',
'Showers': './data/weather/showers_128.png'
};
var seriesLabel = {
normal: {
show: true,
textBorderColor: '#333',
textBorderWidth: 2
}
}
option = {
title: {
text: 'Wheater Statistics'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['City Alpha', 'City Beta', 'City Gamma']
},
grid: {
left: 100
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'value',
name: 'Days',
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
type: 'category',
inverse: true,
data: ['Sunny', 'Cloudy', 'Showers'],
axisLabel: {
formatter: function(value) {
return '{' + value + '| }\n{value|' + value + '}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
Sunny: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 40,
align: 'center',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
},
series: [{
name: 'City Alpha',
type: 'bar',
data: [165, 170, 30],
label: seriesLabel,
markPoint: {
symbolSize: 1,
symbolOffset: [0, '50%'],
label: {
normal: {
formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
backgroundColor: 'rgb(242,242,242)',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
padding: [4, 10],
lineHeight: 26,
// shadowBlur: 5,
// shadowColor: '#000',
// shadowOffsetX: 0,
// shadowOffsetY: 1,
position: 'right',
distance: 20,
rich: {
a: {
align: 'center',
color: '#fff',
fontSize: 18,
textShadowBlur: 2,
textShadowColor: '#000',
textShadowOffsetX: 0,
textShadowOffsetY: 1,
textBorderColor: '#333',
textBorderWidth: 2
},
b: {
color: '#333'
},
c: {
color: '#ff8811',
textBorderColor: '#000',
textBorderWidth: 1,
fontSize: 22
}
}
}
},
data: [{
type: 'max',
name: 'max days: '
},
{
type: 'min',
name: 'min days: '
}
]
}
},
{
name: 'City Beta',
type: 'bar',
label: seriesLabel,
data: [150, 105, 110]
},
{
name: 'City Gamma',
type: 'bar',
label: seriesLabel,
data: [220, 82, 63]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
