| 图表示例 | 图表示例 | 图表示例 |
|---|---|---|
 效果图-1
|
 效果图-2
|
 效果图-3
|
 效果图-4
|
 效果图-5
|
 效果图-6
|
效果 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 `
<div class="m-tooltip-text">
${data.collectedAt}<br/>
题量： ${data.questionNum}，<br>
错题： ${data.wrongNum}，<br>
正确率： ${params[0].value}%
</div>`
}
},
折线图上圆点选中后的样式在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 `
<div class="m-tooltip-text">
${data.collectedAt}<br/>
题量： ${data.questionNum}，<br>
错题： ${data.wrongNum}，<br>
正确率： ${params[0].value}%
</div>`;
}
},
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]
}
]
}
image.png
var option = {
...,
series: [{
label: { // 展示折线上方的值
show: true,
position: 'top'
},
type: 'line',
color: '#2CA2FF',
symbol: 'circle', // 设置为实心点
symbolSize: 6, // 折线点的大小
data: [20, 113, 40, 38, 38, 86, 104, 113]
}]
}
效果4——仪表盘
效果图-4
该图配置主要为：
- 刻度线颜色渐变，而且颜色随着比例变化
- 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
};
效果5
效果图-5
option = {
backgroundColor:'#17243A',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '63%',
containLabel: true
},
xAxis: {
show: false,
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: [
{
inverse: true,
axisLabel: {
color: '#ADCBE9',
fontSize: 16,
formatter: (value) => {
if (value.length < 8) {
return value;
}
return `${value.substring(0, 8)}...`;
},
},
axisLine: {
lineStyle: {
color: 'transparent',
},
},
data: ['item1', 'item2', 'item3', 'item4']
}, {
inverse: true,
axisTick: 'none',
axisLine: 'none',
axisLabel: {
show: true,
fontSize: 16,
height: 20,
fontWeight: 'bold',
color: '#BFD1E3',
padding: [5, 12, 5, 12],
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAWCAYAAAA/45nkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVRoge3ZwQoBURTG8XOvKzGzmnQ3SpKJrMZb2HsQL+MRLCkb5RHsbNVspGwkRYamplipaSiUOodzZnl/d/FvZvPVqP5geoXMs18ve0l8ibLnfq1SDlebXfZc7LWZQtHxqq1x1g0AwDZcdKmG/4sl8SW6v+e7HfJ2qCnEcTaNHcDdNAAA1TgOlqv77TnVuH+3ODpO9LuXxb5vSXw+PXwAKnFcTH9yWez7JjMU2WSGYs9Q7ADuprEDuJvMUGSTGYpsMkORTWYooplCydW2EYwoxnEwr9ocaVDKpRjHxZ6uICpxHExmKLIZAADrd2bpwzD175Jq+C+abQRjUMpJ+w1co8ZyUwNCuQAAAABJRU5ErkJggg==',
},
},
data: [60, 120, 33, 97],
},
],
series: [
{
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,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',
symbolOffset: [20, -5],
symbolSize: [40, 40],
symbolPosition: 'end',
z: 12,
data: [60, 120, 33, 97],
}, {
name: '',
type: 'bar',
showBackground: true,
yAxisIndex: 0,
barWidth: 7,
barBorderRadius: 10,
data: [60, 120, 33, 97].map((value, index) => ({
value,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#2F3E56',
},
{
offset: 1,
color:'#7BB1EE',
},
],
},
},
},
})),
},
]
};
效果6
效果图-6
option = {
tooltip: {
trigger: 'axis'
},
legend: {
itemWidth: 16,
itemHeight:16,
data: [
{
name:'测试次数',
itemStyle: {
color: '#FF8843'
},
},
{name: '正确率'}
],
left: 'center',
bottom: 11
},
xAxis: [
{
type: 'category',
data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-10'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
interval: 25,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '',
min: 0,
interval: 25,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '测试次数',
type: 'bar',
barMaxWidth: 34,
tooltip: {
valueFormatter: function (value) {
return value + '';
}
},
data: [
12, 18, 33, 88, 66, 52, 77
].map((value, index) => ({
value,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#FF803B',
},
{
offset: 1,
color:'#FFE19F',
},
],
},
},
},
}))
},
{
name: '正确率',
type: 'line',
yAxisIndex: 1,
smooth: true,
color: '#F7BE3E',
symbol: 'circle',
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: [ 12, 18, 33, 88, 66, 52, 77]
}
]
}
