使用echarts繪制條形圖和扇形圖
簡單舉例說明下echarts如何繪制條形圖和扇形圖
代碼示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts繪制條形圖和扇形圖</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="chart1" style="width: 500px;height:500px;float: left;"></div>
<div id="chart2" style="width: 500px;height:500px;float: right;"></div>
<script>
var mychart1=echarts.init(document.getElementById('chart1'),'light');
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [40, 20, 36, 10, 10, 20]
}]
};
// 使用指定的配置項和數據顯示條形圖表1。
mychart1.setOption(option);
//顯示扇形圖表2
var mychart2=echarts.init(document.getElementById('chart2'),'light');
var option2 = {
title: {
text: 'ECharts 扇形圖示例'
},
tooltip: {},
series: [{
type: 'pie',
data: [
{value:1, name:'視頻廣告'},
{value:2, name:'聯盟廣告'}
]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
mychart2.setOption(option2);
</script>
</body>
</html>
展示的效果如下圖
注意
扇形圖的數據中,value值和圖形百分比的關系是，單個value/所有value的綜合*100%