Echarts浅谈饼图/环形图(pie)使用
从事前端开发已有一段时间了，由于各种原因，一直都没有形成自己的总结文档，第一次写，不足的请各位高手指导。
本文总结Echarts对饼图的使用
一、准备工作
// 第一步：设置一个标签来放置饼图，必须设置宽高；
<div id="main" style="width: 100%;height: 280px;"></div>
// 第二步：要引入echarts.js文件，可以使用npm install echarts安装ECharts，也可以将js文件下载到本地（下载地址：https://echarts.baidu.com/download.html）
<script src="js/echarts.js"></script>
// 第三步：创建一个自己的js文件来存放饼图相关的配置及数据
<script src="js/main.js"></script>
二、准备工作就做好之后，我们在js中写入饼图相关的配置及数据
// 初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 标题组件，这里只列举常用的，更多详细的官网配置项都可以看到
title: {
show:true, // 标题显示（true：显示；false：隐藏）
left: 'center', // 标题距离容器的距离（可以是left、center、right；也可以是像素或百分比）
text:'饼图图表主标题', // 主标题
subtext:'饼图图表副标题', // 副标题
textStyle:{ // 关于主标题的一些文字样式设置，有颜色、字体、字号、宽高等；具体的详见官网配置项，textStyle为主标题的样式配置，subtextStyle为副标题的样式设置
color:'#333',
}
},
// 提示框组件——鼠标划过时显示的提示框组件
tooltip:{
show:true, // 提示框显示（true：显示；false：隐藏——要使提示框隐藏除了设置show: false之外还要设置showContent: false）
trigger: 'item', // 数据项图形触发,这里的触发有item、axis、none，分别对应不同的图表类型，饼状图用item即可
formatter: "{a} <br/>{b}: {c} ({d}%)", // 各个字母表示系列名，数据名，数据值等，具体根据需求显示
// 还有一些包含了提示框的位置，样式（borderColor、position、textStyle等）
},
// 图例组件
legend:{
show:true, // 图例显示（true：显示；false：隐藏），同样的图例组件也有显示的样式等
},
// 图例颜色
color: ['#477BEF', '#FF7903', '#38CAFF'], //手动设置每个图例的颜色,
// 系列列表
series: [
{
name: '饼图示例', //系列名称
type: 'pie', //类型 pie表示饼图
radius: ['50%', '60%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
startAngle: 90,// 起始角度，支持范围[0, 360]
label: { // 文本标签
normal: {
show: false
},
emphasis: { // 高亮时的显示样式
show: true,
formatter: '{b}\n{d}%', // 具体要显示出来的内容
position: "inside",
rich: { // 显示出的内容，设置样式
b: {
fontSize: 16,
align: 'center'
},
d: {
fontSize: 16,
padding: 0,
}
}
}
},
labelLine: { // 引导线的样式
normal: { // 目前只有引导线的长短设置，根据自己需求设置(我这里没有设置)
// length: 4,
// length2: 8,
},
},
// 饼图内容，可单独设置内容及样式，也可直接写入内容
data: [
{
value: 20,
name: '饼图第一部分',
labelLine: {
normal: {
length: 15,
length2: 30,
},
},
},
{
value: 40,
name: '饼图第二部分',
labelLine: {
normal: {
length: 15,
length2: 30,
},
},
},
{
value: 40,
name: '饼图第二部分',
labelLine: {
normal: {
length: 15,
length2: 30,
},
},
}
]
}
]
};
三、让图表显示
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 暂时默认第一个高。
myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 });
四、查看页面示例
以上就是根据Echarts中对饼图的使用！