可通過配置參數來實作想要的可視化圖形！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>餅狀圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/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'));
myChart.setOption({
title: {
text: "全國31個省份排名",
x: "center",
y: 45 //更改标題位置
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}個({d}%)"
},
series : [
{
name: "全國排名",
type: "pie", // 設定圖表類型為餅圖
radius: "50%", // 餅狀圖半徑
center: ["52%", "52%"], //修改左右餅圖位置
itemStyle: {
normal: {
label: {
show: true,
fontSize:19, //更改名稱字型大小
formatter: "{b}: {c}個({d}%)"
}
}
},
data: [
{value: 3, name: "其他", itemStyle: { color: '#CDBA96' }}, //更改名稱，占比，及名稱字型的顔色
{value: 1, name: "第①名",itemStyle: { color: '#6699cc'}},
]
}
]
})
</script>
</body>
</html>
直接儲存為.html格式的文本，用浏覽器打開即可！！
![Echarts1-- angular2中引入echarts[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)