效果 1——圆角环形图
效果图-1
该配置不常用的点在于饼图中心标签内容样式的配置，主要用到series下label下formatter,rich的配置。
配置项可以放到https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius里去预览。
效果图-1配置项：
option = {
series: [
{
name: '',
type: 'pie',
radius: ['40%', '60%'],
label: { // 饼图图形上的文本标签
normal: {
show: true,
position: 'center', // 位置在饼图中心位
formatter: function (params) { // 标签内容格式器
if (params.name === '答错') {
return `{b|${params.name}}\n{wrong|${params.percent}%}`;
} else {
return `{b|${params.name}}\n{right|${params.percent}%}`;
}
},
rich: { // 富文本样式，可以在标签中做出非常丰富的效果
b: {
fontSize: 10
},
wrong: {
color: '#FF9A80',
fontSize: 12,
fontWeight: 'bold'
},
right: {
color: '#30CA8D',
fontSize: 12,
fontWeight: 'bold'
}
}
}
},
emphasis: {
label: {
show: true,
backgroundColor: '#fff' // 颜色加上后可以盖住直接展示的label
}
},
itemStyle: { borderColor: '#fff', borderWidth: 3 },
color: ['#30CA8D', '#FF9A80'],
data: [
{
name: '答对',
percent: '77.78',
value: 7
},
{
name: '答错',
percent: '22.22',
value: 2
}
]
}
],
tooltip: { show: false }
};
效果2——基础面积图
效果图-2
效果图-2配置主要是：
不显示刻度
axisTick: { show: false }
不显示坐标轴线
axisTick: { show: false }
tooltip自定义
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 指示器类型 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器
label: { backgroundColor: '#6a7985' }
},
// 图例文字颜色
textStyle: { fontSize: 10, color: '#fff' },
borderColor: 'transparent',
backgroundColor: 'rgba(46, 48, 60, .74)',
// 图例要显示的其他内容
formatter: function (params, ticket, callback) {
let data = params[0].data
return `
${data.collectedAt}
题量： ${data.questionNum}，
错题： ${data.wrongNum}，
正确率： ${params[0].value}%
`
}
},
折线图上圆点选中后的样式在itemStyle. itemStyle .emphasis内去配置。
效果图-2配置项:
var seriesData = [
{
objectId: '614a8bbf6f5d4e550e3d210f',
createdAt: '2021-09-01 09:49:51',
collectedAt: '2021-09-01 09:50:21',
wrongNum: 5,
rightRatio: 80,
knowledgeNum: 25,
questionNum: 25,
equipmentNum: 25,
updatedAt: '2021-09-01 09:50:21',
value: 40
},
{
objectId: '614ac16791441128f283268d',
createdAt: '2021-09-02 13:38:47',
collectedAt: '2021-09-02 13:39:19',
wrongNum: 5,
rightRatio: 80,
knowledgeNum: 20,
questionNum: 25,
equipmentNum: 25,
updatedAt: '2021-09-02 13:39:19',
value: 50
},
{
objectId: '614ac1a091441128f28326df',
createdAt: '2021-09-03 13:39:44',
collectedAt: '2021-09-03 13:40:00',
wrongNum: 3,
rightRatio: 66.67,
knowledgeNum: 3,
questionNum: 9,
equipmentNum: 4,
updatedAt: '2021-09-03 13:40:00',
value: 66.67
},
{
objectId: '614ac1a091441128f28326df',
createdAt: '2021-09-04 13:39:44',
collectedAt: '2021-09-04 13:40:00',
wrongNum: 3,
rightRatio: 66.67,
knowledgeNum: 3,
questionNum: 9,
equipmentNum: 4,
updatedAt: '2021-09-04 13:40:00',
value: 33
},
{
objectId: '614ac1a091441128f28326df',
createdAt: '2021-09-05 13:39:44',
collectedAt: '2021-09-05 13:40:00',
wrongNum: 3,
rightRatio: 66.67,
knowledgeNum: 3,
questionNum: 9,
equipmentNum: 4,
updatedAt: '2021-09-05 13:40:00',
value: 67
}
];
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['9/1', '9/2', '9/3', '9/4', '9/5'],
// 不显示刻度
axisTick: { show: false },
// 不显示坐标轴线
axisLine: { show: false },
// 横坐标文字颜色，大小
axisLabel: { color: '#9B9C9E', fontSize: '12' }
},
yAxis: {
show: false, // 不显示坐标轴，刻度线，文字
type: 'value',
splitLine: {
show: false // 不展示横线
}，
// 如果展示y坐标轴，且带单位‘%’，可以这么配置
axisLabel: { color: '#9B9C9E', fontSize: '12'， formatter: '{value}%' }
},
// 图表大小
grid: [{ top: 10, bottom: 30, left: '3%', right: '4%' }],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 指示器类型 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器
label: { backgroundColor: '#6a7985' }
},
// 图例文字颜色
textStyle: { fontSize: 10, color: '#fff' },
borderColor: 'transparent',
backgroundColor: 'rgba(46, 48, 60, .74)',
// 图例要显示的其他内容
formatter: function (params, ticket, callback) {
let data = params[0].data;
return `
${data.collectedAt}
题量： ${data.questionNum}，
错题： ${data.wrongNum}，
正确率： ${params[0].value}%
`;
}
},
series: [
{
name: '正确率',
data: seriesData,
type: 'line',
smooth: true,
itemStyle: {
normal: { color: '#2CA2FF', lineStyle: { color: '#2CA2FF' } },
// 折线图上圆点选中后的样式
emphasis: {
color: '#2CA2FF',
borderColor: 'rgba(44, 162, 255, .2)',
borderWidth: 10
}
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#C5E5FF'
},
{
offset: 1,
color: '#FAFBFC'
}
])
}
}
]
};
效果3——折线图
效果图-3
效果图-3配置主要是：不显示x轴刻度
axisTick: { show: false }， 显示y轴的竖线并定义颜色axisLine: { show: true, lineStyle: { color: '#ebebeb' } }
折线点设置为实心点
symbol: 'circle',
折线点设置大小
symbolSize: 6。
效果图-3配置项:
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: false // 不展示legend
},
grid: {
left: '1%',
right: '3%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
fontSize: 11,
color: '#737478' // x轴坐标值颜色
}
},
axisLine: {
lineStyle: {
color: '#ebebeb' // x轴颜色
}
},
axisTick: {
show: false // 坐标轴刻度不显示
},
data: ['4月8日', '4月8日', '4月8日', '4月8日', '4月8日', '4月8日', '4月8日']
},
yAxis: {
type: 'value',
axisLine: { // 显示y轴的竖线
show: true,
lineStyle: {
color: '#ebebeb' // x轴颜色
}
},
axisLabel: {
formatter: '{value}%', // 轴展示如： 20%
textStyle: {
fontSize: 11,
color: '#737478' // y轴坐标值颜色
}
}
},
series: [
{
name: '年级得分率',
type: 'line',
color: '#F0BB5A',
symbol: 'circle', // 设置为实心点
symbolSize: 6, // 折线点的大小
data: [80, 72, 100, 84, 90, 50, 60]
},
{
name: '班级得分率',
type: 'line',
color: '#2CA2FF',
symbol: 'circle', // 设置为实心点
symbolSize: 6, // 折线点的大小
data: [88, 89, 91, 77, 50, 79, 50]
}
]
}
效果4——仪表盘
image.png
该图配置主要为：
- 刻度线颜色渐变，而且颜色随着比例变化
- axisTick的lineStyle有渐变色，所以黑色和灰色的图表样式也用渐变的配置，不然小程序真机调试的时候颜色都会变成相同的渐变颜色
- 仪表盘详情，显示数据的样式，detail.rich配合detail.formatter使用
var rateValue = 0.6 // 值，0~1之间
var startAngle = 215 // 开始角度
var endAngle = -35 // 结束角度
var splitCount = 50 // 刻度数量
// 当前指针（值）角度
var pointerAngle = (startAngle - endAngle) * (1 - rateValue) + endAngle
if (rateValue === 1) {
pointerAngle = -35
}
// 已完成
let series = [{
type: 'gauge',
startAngle: startAngle,
endAngle: pointerAngle,
splitNumber: 1,
axisLine: {
lineStyle: {
width: 20,
opacity: 0
}
},
title: {show: true, offsetCenter: [0, 80], fontSize: 14},
pointer: {show: false},
axisTick: {
distance: -5,
length: 15,
splitNumber: Math.ceil(rateValue * splitCount),
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#FEB783' // 0% 处的颜色
}, {
offset: 1, color: '#FA6258' // 100% 处的颜色
}],
global: false // 缺省为 false
},
width: 4
}
},
// 刻度
splitLine: {
show: false
},
axisLabel: {show: false},
detail: {
valueAnimation: true,
offsetCenter: [0, '-15%'],
color: 'black',
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
rich: {
value: {
fontSize: 47,
fontWeight: '500',
color: '#FA6258'
},
unit: {
fontSize: 17,
color: '#FA6258',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: rateValue * 100,
name: '你已超过了' + rateValue * 100 + '%的同行'
}
]
}]
series.push({
type: 'gauge',
startAngle: 225,
endAngle: -45,
splitNumber: 1,
axisLine: {
lineStyle: {
opacity: 0,
width: 30
}
},
title: {show: false},
pointer: {show: false},
axisTick: {
distance: -30,
length: 1,
splitNumber: 55,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#E3E5E7' // 0% 处的颜色
}, {
offset: 1, color: '#E3E5E7' // 100% 处的颜色
}],
global: false // 缺省为 false
},
width: 4
}
// lineStyle: {
// color: '#E3E5E7',
// width: 3,
// cap: 'round'
// }
},
splitLine: {
show: false
},
axisLabel: {show: false},
detail: {show: false},
data: [0]
})
if (rateValue !== 1) {
// 未完成
series.push({
type: 'gauge',
startAngle: pointerAngle,
endAngle: endAngle,
splitNumber: 1,
axisLine: {
lineStyle: {
opacity: 0,
width: 20
}
},
title: {show: false},
pointer: {show: false},
axisTick: {
distance: -5,
length: 15,
splitNumber: Math.floor((1 - rateValue) * splitCount),
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#001242' // 0% 处的颜色
}, {
offset: 1, color: '#001242' // 100% 处的颜色
}],
global: false // 缺省为 false
},
width: 4
}
},
splitLine: {
show: false
},
axisLabel: {show: false},
detail: {show: false},
data: [30]
})
}
option = {
series: series
};