一:
案例1:
代码如下:
stackBar.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis:{
type:'category',
data:['方式1','方式2','方式3','方式4','方式5']
},
yAxis:{
type:'value'
},
series:[
{
name:'男性',
type:'bar',
stack:'total',
label: {
show: true
},
data:[10,22,21,30,11]
},
{
name:'女性',
type:'bar',
stack:'total',
label: {
show: true
},
data:[20,10,12,14,23]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
效果如下:
standBar.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:400px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis:{
type:'value',
},
yAxis:{
type:'category',
data:['男','女']
},
series:[
{
name:'个数',
type:'bar',
label: {
show: true
},
data:[58,61]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
效果如下:
falls.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
xAxis:{
type:'category',
data:['总和','城市a','城市b','城市c','城市d','城市e']
},
yAxis:{
type:'value'
},
series:[
{
name:'金额',
type:'bar',
stack:'total',
label: {
show: true
},
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
data:[0,270,220,130,40,0]
},
{
name:'金额',
type:'bar',
stack:'total',
label: {
show: true
},
data:[500,230,50,90,90,40]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
效果如下:
案例二:
pie.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
tooltip: {
trigger: 'item',
},
series:[
{
name:'入会方式',
type:'pie',
data:[
{value:20,name:'方式1'},
{value:8,name:'方式2'},
{value:15,name:'方式3'},
{value:23,name:'方式4'},
{value:13,name:'方式5'}
]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
效果如下:
circular.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
tooltip: {
trigger: 'item',
},
series:[
{
name:'入会方式',
type:'pie',
radius: ['40%', '100%'],
data:[
{value:20,name:'方式1'},
{value:8,name:'方式2'},
{value:15,name:'方式3'},
{value:23,name:'方式4'},
{value:13,name:'方式5'}
]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
效果如下:
它和pie.html的区别在于它多了下图的一段代码: