前言
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>