前言
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
生成環形餅圖
首先定義options作為環狀圖的參數,options.series:系列數據列表列表。每個系列通過 type 決定自己的圖表類型
- series: 為數組形式，可以存放多組數據，當前只用到單環形式，series[0]對應的數據
- name：圖像名稱
- type：圖像類型
- radius：餅圖的半徑，基礎餅狀圖只需寫一個半徑，環狀圖寫2個半徑
- data：餅圖數據數組
<!DOCTYPE html>
<html lang="en">
<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: ['45%', '65%'], // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:4},
]}
]
})
</script>
</body>
</html>
顯示效果
標簽優化
label 設置外標簽顯示內容百分比
color 設置自定義顏色
<script type="text/javascript">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: ['45%', '65%'], // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '{b}:{c} ({d}%)'
},
color: ['#00ff00', '#ff0000'],
data:[ // 數據數組，name 為數據項名稱，value 為數據項值
{name:'通過', value:20},
{name:'失敗', value:4},
]}
]
})
</script>
顯示效果
換行顯示
label: {
position: 'outside',
formatter: '用例數：{c} \n {b}率({d}%)'
}
顯示效果
環內設置總數
在環形內，設置title屬性，可以設置總數量
- text 標題
- subtext 副標題
- x 水平居中
- y 垂直居中
- textStyle 標題字體樣式
- subtextStyle 副標題字體樣式
<script type="text/javascript">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '用例總數',
subtext: '24',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 25,
color: '#00eeff'
}, // 標題
subtextStyle: {
fontWeight: 'normal',
fontSize: 28,
color: '#00eeff'
} // 副標題
},
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: ['45%', '65%'], // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '用例數：{c} \n {b}率({d}%)'
},
color: ['#00ff00', '#ff0000'],
data: [ // 數據數組，name 為數據項名稱，value 為數據項值
{name: '通過', value: 20},
{name: '失敗', value: 4}
]
}]
})
</script>
顯示效果
tooltip 和 legend
設置tooltip 和 legend
<script type="text/javascript">
// 初始化 echarts 實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
title: {
text: '用例總數',
subtext: '24',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 25,
color: '#00eeff'
}, // 標題
subtextStyle: {
fontWeight: 'normal',
fontSize: 28,
color: '#00eeff'
} // 副標題
},
series : [{
name: '測試報告',
type: 'pie', // 設置圖表類型為餅圖
radius: ['45%', '65%'], // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
label: {
position: 'outside',
formatter: '用例數：{c} \n {b}率({d}%)'
},
color: ['#00ff00', '#ff0000'],
data: [ // 數據數組，name 為數據項名稱，value 為數據項值
{name: '通過', value: 20},
{name: '失敗', value: 4}
]
}]
})
</script>
legend 顯示水平方向一行居中
legend: {
top: '5%',
left: 'center'
}
顯示效果
