前言
ECharts 是一個使用 JavaScript 實現的開源可視化庫，涵蓋各行業圖表，滿足各種需求。
ECharts下載與使用
可以在直接下載 echarts.min.js 並用 <script>標簽引入。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
開發環境下可以使用源代碼版本 echarts.js 並用 <script> 標簽引入，源碼版本包含了常見的錯誤提示和警告。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.js
使用在線 CDN 方法:
Staticfile CDN（國內） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
基礎餅圖
先生成一個最基礎的餅圖
<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">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:10},
{name:'故障', value:3},
{name:'跳過', value:2},
{name:'其它', value:0}
]}
]
})
</script>
</body>
效果圖
這里是 value 不需要是百分比數據，ECharts 會根據所有數據的 value ，按比例分配它們在餅圖中對應的弧度。
餅圖的半徑可以通過 series.radius 設置，可以是諸如 '55%' 這樣相對的百分比字符串，或是 200 這樣的絕對像素數值。當它是百分比字符串時，它是相對於容器寬高中較小的一條邊的。也就是說，如果寬度大於高度，則百分比是相對於高度的，反之則反；當它是數值型時，它表示絕對的像素大小。
series 參數說明：
- name 餅圖的名稱，用於tooltip的顯示
- type 類型，pie是餅圖，category是柱狀圖，line是折線圖
- radius 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的設置百分比長度。
- data 加載的數據組，name 為數據項名稱，value 為數據項值（不需要百分比，會自動計算）
- roseType 可以通過設置參數 roseType: 'angle' 把餅圖顯示成南丁格爾圖
- itemStyle 陰影配置
- label 設置標簽顯示內容
顯示百分比
label參數說明：
- position 標簽的位置。'outside'餅圖扇區外側，'inside'餅圖扇區內部。'center'在餅圖中心位置(圓環圖)
- formatter 標簽內容格式器，支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用 \n 換行。
字符串模板 模板變量有：
- {a}：系列名。
- {b}：數據名。
- {c}：數據值。
- {d}：百分比。
- {@xxx}：數據中名為 'xxx' 的維度的值，如 {@product} 表示名為 'product' 的維度的值。
- {@[n]}：數據中維度 n 的值，如 {@[3]} 表示維度 3 的值，從 0 開始計數。
示例：formatter: '{b}: {d}'
<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">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '{b}:{c} ({d}%)'
},
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:10},
{name:'故障', value:3},
{name:'跳過', value:2},
{name:'其它', value:0}
]}
]
})
</script>
</body>
實現效果
調色板
自定義餅圖顏色，成功是綠色，失敗是紅色，可以在series添加color屬性
color 屬性放到setOption下是全局的生效，放到series下是局部的生效
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '{b}:{c} ({d}%)'
},
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:10},
{name:'故障', value:3},
{name:'跳過', value:2},
{name:'其它', value:0}
],
// 此系列自己的調色盤
color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a']
}]
實現效果
高亮樣式（emphasis）
在鼠標懸浮到圖形元素上時，一般會出現高亮的樣式。默認情況下，高亮的樣式是根據普通樣式自動生成的。
如果要自定義高亮樣式可以通過 emphasis 屬性來定制：
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '{b}:{c} ({d}%)'
},
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:10},
{name:'故障', value:3},
{name:'跳過', value:2},
{name:'其它', value:0}
],
// 此系列自己的調色盤
color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a'],
// 高亮樣式。
emphasis: {
itemStyle: {
// 高亮時點的顏色
color: 'blue'
},
label: {
show: true,
// 高亮時標簽的文字
formatter: '高亮時顯示 {b}:{c} ({d}%)'
}
}
}]
顯示效果
title和tooltip
設置餅圖title 和tooltip
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '接口自動化測試',
subtext: 'test環境',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '{b}:{c} ({d}%)'
},
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:10},
{name:'故障', value:3},
{name:'跳過', value:2},
{name:'其它', value:0}
],
// 此系列自己的調色盤
color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a'],
// 高亮樣式。
emphasis: {
itemStyle: {
// 高亮時點的顏色
color: 'blue'
},
label: {
show: true,
// 高亮時標簽的文字
formatter: '高亮時顯示 {b}:{c} ({d}%)'
}
}
}]
})
</script>
</body>
顯示效果
echarts 官方文檔 https://echarts.apache.org/zh/index.html