Echarts的常用图表的实例使用--饼图
这是饼图的一种，圆环图，也是一种常用的图表。现在我就大概得讲解下一些特别的地方的显示和设置。
1、圆环图的设置
center: ['50%', '49%'], radius: ['45%', '63%'],复制代码
2、圆环中心的标题的主标题和副标题的设置
text和subtext是主标题和副标题的文字修改。其中副标题subtext，在设置内容时可以直接使用换行符，/n，如下
x,y的时设置标题在图表所在的位置。
textStyle和subtextStyle设置标题的样式，和正常的css有点区别就是，这里的样式写法必须时驼峰写法，如：正常css：font-size ,图表的样式：fontSize
show: true,
text: '人员分类',
x: 'center',
y: 'center',
itemGap: 10,
textStyle: {
//主标题的样式修改
fontSize: 28,
fontStyle: 'normal',
fontWeight: 700,
color: '#fff'
},
subtext: '玄幻小说\n(纪元)',
subtextStyle: {
//副标题的颜色修改 副标题可以直接使用换行符\n
fontSize: 14,
fontStyle: 'normal',
fontWeight: 400,
color: '#fff'
}复制代码3、图表label的设置
想这种导线和文字处于对齐的设置，是有点麻烦，可以多看看，仔细研究（我也一点点弄了很久才出来的）
（1）这个是图表上面的文字的显示
主要使用formatter的函数来进行显示，然后使用rich来设置不同参数显示的样式（这个是可以写成一个单独的函数来进行配置和独立开），如下我设置了不同的显示不同的颜色配置和距离
formatter: function (params) {
//这个是图表上面的文字的显示
const name = params.name;
const percent = params.percent + '%';
const index = params.dataIndex;
const value = params.value;
return [
`{a${index}|${name}} {b${index}|${value}}{pre${index}|人} \n {c${index}|${percent}} `,
`{hr${index}|}`
].join('\n');
},
color: '#fff',
rich: {
a: { fontSize: 14, color: '#dfe7fc', align: 'center' },
b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' },
c: {
paddingTop: '10px',
color: '#CBA0FF',
fontSize: 14,
align: 'center'
}
}复制代码（2）导线的设置
主要是就是下面这两个模块
labelLine: {
//这个是图表上面的文字显示的线条设置
length: 15, //线条的长度
length2: 240,//线条的长度
maxSurfaceAngle: 80
},
labelLayout: function (params) {
//这个是图表上面的文字显示的线条设置，内容换行（刚好在线的上下）
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},复制代码但是有时候上面的设置还要加上设置高度和行高才行的
margin: 20, minMargin: 10, edgeDistance: 20, lineHeight: 20, height: 40,复制代码
4、渐变颜色的设置
这也是一个函数的进行的，主要是使用echarts.graphic.LinearGradient，还是就时一个径向的渐变方式，echarts.graphic.RadialGradient
normal: {
color: function (params) {
//渐变颜色的设置
var colorList = [
{
c1: '#3288FC',
c2: '#36B4FD'
},
{
c1: '#FCAE17',
c2: '#FCDA5B'
},
{
c1: '#CBA0FF',
c2: '#598EFE'
},
{
c1: '#30DDD8',
c2: '#84F0F0'
},
{
c1: '#3288FC',
c2: '#36B4FD'
},
{
c1: '#FCAE17',
c2: '#FCDA5B'
},
{
c1: '#CBA0FF',
c2: '#598EFE'
},
{
c1: '#30DDD8',
c2: '#84F0F0'
}
];
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
},
{
offset: 1,
color: colorList[params.dataIndex].c2
}
]);
}
}复制代码5、完整的案例代码
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;
const that = this;
option = {
tooltip: {
show: false,
trigger: 'item'
},
grid: {},
title: {
show: true,
text: '人员分类',
x: 'center',
y: 'center',
itemGap: 10,
textStyle: {
//主标题的样式修改
fontSize: 28,
fontStyle: 'normal',
fontWeight: 700,
color: '#fff'
},
subtext: '玄幻小说\n(纪元)',
subtextStyle: {
//副标题的颜色修改 副标题可以直接使用换行符\n
fontSize: 14,
fontStyle: 'normal',
fontWeight: 400,
color: '#fff'
}
},
series: [
{
type: 'pie',
center: ['50%', '49%'],
radius: ['45%', '63%'],
// minAngle: 0,
startAngle: 0, // 渐变角度
avoidLabelOverlap: true, //是否启用防止标签重叠
emphasis: {
label: {
show: true,
position: 'center'
}
},
label: {
//
position: 'outer',
alignTo: 'edge',
margin: 20,
minMargin: 10,
edgeDistance: 20,
lineHeight: 20,
height: 40,
formatter: function (params) {
//这个是图表上面的文字的显示
const name = params.name;
const percent = params.percent + '%';
const index = params.dataIndex;
const value = params.value;
return [
`{a${index}|${name}} {b${index}|${value}}{pre${index}|人} \n {c${index}|${percent}} `,
`{hr${index}|}`
].join('\n');
},
color: '#fff',
rich: {
a: { fontSize: 14, color: '#dfe7fc', align: 'center' },
b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' },
c: {
paddingTop: '10px',
color: '#CBA0FF',
fontSize: 14,
align: 'center'
}
}
},
labelLine: {
//这个是图表上面的文字显示的线条设置
length: 15,
length2: 240,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
//这个是图表上面的文字显示的线条设置，内容换行（刚好在线的上下）
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: [
{ value: 17, name: '异界' },
{ value: 16, name: '消炎' },
{ value: 24, name: '林动' },
{ value: 5, name: '牧尘' },
{ value: 16, name: '叶凡' },
{ value: 14, name: '石化' },
{ value: 97, name: '周一' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label: {
show: true
}
},
normal: {
color: function (params) {
//渐变颜色的设置
var colorList = [
{
c1: '#3288FC',
c2: '#36B4FD'
},
{
c1: '#FCAE17',
c2: '#FCDA5B'
},
{
c1: '#CBA0FF',
c2: '#598EFE'
},
{
c1: '#30DDD8',
c2: '#84F0F0'
},
{
c1: '#3288FC',
c2: '#36B4FD'
},
{
c1: '#FCAE17',
c2: '#FCDA5B'
},
{
c1: '#CBA0FF',
c2: '#598EFE'
},
{
c1: '#30DDD8',
c2: '#84F0F0'
}
];
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
},
{
offset: 1,
color: colorList[params.dataIndex].c2
}
]);
}
}
}
}
]
};
option && myChart.setOption(option);
作者：青烟小生
链接：https://juejin.cn/post/7020956614630834206