| 圖表示例 | 圖表示例 | 圖表示例 |
|---|---|---|
 效果圖-1
|
 效果圖-2
|
 效果圖-3
|
 效果圖-4
|
 效果圖-5
|
 效果圖-6
|
效果 1——圓角環(huán)形圖
效果圖-1
該配置不常用的點在于餅圖中心標(biāo)簽內(nèi)容樣式的配置，主要用到series下label下formatter,rich的配置。
配置項可以放到https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius里去預(yù)覽。
效果圖-1配置項：
option = {
series: [
{
name: '',
type: 'pie',
radius: ['40%', '60%'],
label: { // 餅圖圖形上的文本標(biāo)簽
normal: {
show: true,
position: 'center', // 位置在餅圖中心位
formatter: function (params) { // 標(biāo)簽內(nèi)容格式器
if (params.name === '答錯') {
return `{b|${params.name}}\n{wrong|${params.percent}%}`;
} else {
return `{b|${params.name}}\n{right|${params.percent}%}`;
}
},
rich: { // 富文本樣式，可以在標(biāo)簽中做出非常豐富的效果
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——基礎(chǔ)面積圖
效果圖-2
效果圖-2配置主要是：
不顯示刻度
axisTick: { show: false }不顯示坐標(biāo)軸線
axisTick: { show: false }tooltip自定義
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 指示器類型 'line' 直線指示器 'shadow' 陰影指示器 'none' 無指示器 'cross' 十字準(zhǔn)星指示器
label: { backgroundColor: '#6a7985' }
},
// 圖例文字顏色
textStyle: { fontSize: 10, color: '#fff' },
borderColor: 'transparent',
backgroundColor: 'rgba(46, 48, 60, .74)',
// 圖例要顯示的其他內(nèi)容
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內(nèi)去配置。
效果圖-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 },
// 不顯示坐標(biāo)軸線
axisLine: { show: false },
// 橫坐標(biāo)文字顏色，大小
axisLabel: { color: '#9B9C9E', fontSize: '12' }
},
yAxis: {
show: false, // 不顯示坐標(biāo)軸，刻度線，文字
type: 'value',
splitLine: {
show: false // 不展示橫線
}，
// 如果展示y坐標(biāo)軸，且?guī)挝弧?’，可以這么配置
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' 十字準(zhǔn)星指示器
label: { backgroundColor: '#6a7985' }
},
// 圖例文字顏色
textStyle: { fontSize: 10, color: '#fff' },
borderColor: 'transparent',
backgroundColor: 'rgba(46, 48, 60, .74)',
// 圖例要顯示的其他內(nèi)容
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' } }折線點設(shè)置為實心點
symbol: 'circle',折線點設(shè)置大小
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軸坐標(biāo)值顏色
}
},
axisLine: {
lineStyle: {
color: '#ebebeb' // x軸顏色
}
},
axisTick: {
show: false // 坐標(biāo)軸刻度不顯示
},
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軸坐標(biāo)值顏色
}
}
},
series: [
{
name: '年級得分率',
type: 'line',
color: '#F0BB5A',
symbol: 'circle', // 設(shè)置為實心點
symbolSize: 6, // 折線點的大小
data: [80, 72, 100, 84, 90, 50, 60]
},
{
name: '班級得分率',
type: 'line',
color: '#2CA2FF',
symbol: 'circle', // 設(shè)置為實心點
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', // 設(shè)置為實心點
symbolSize: 6, // 折線點的大小
data: [20, 113, 40, 38, 38, 86, 104, 113]
}]
}
效果4——儀表盤
效果圖-4
該圖配置主要為：
- 刻度線顏色漸變，而且顏色隨著比例變化
- axisTick的lineStyle有漸變色，所以黑色和灰色的圖表樣式也用漸變的配置，不然小程序真機調(diào)試的時候顏色都會變成相同的漸變顏色
- 儀表盤詳情，顯示數(shù)據(jù)的樣式，detail.rich配合detail.formatter使用
var rateValue = 0.6 // 值，0~1之間
var startAngle = 215 // 開始角度
var endAngle = -35 // 結(jié)束角度
var splitCount = 50 // 刻度數(shù)量
// 當(dāng)前指針（值）角度
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,iVBORw0KGgoAAAANSUhEUgAAADQAAAA1CAYAAAAOJMhOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAI9ElEQVRogbWa244cxw2GP1b37EGSAztAAsNArvIYAfIEeetc5hlyZSlxACuCvV7NaqebzEUVq1mcXmlWUgoYzEx3VTV/Hn6SNSM//WZcMixME7l8LiAiWL7ve3zOvh+bVz6+xbOH5M8NjOzcj/M+AeXyMX+FPQSqBZ7QoN+XZhm/a3FtWNOvfc74LAsll/JvAlgTTNJ9aWuy8Ij0724p4wss9jVcrmvcBQuAB8FC3Fh698++8sxCdqHNLgV0FhvxWWza7W6VQSXLSXj1eWnNZ1lp3kP+BItktjqbFdjLYky063tM1+NIBMzq58iCzx2XkkKMDdsJfqMCduHJQoU1siPsYJ0dxV1MEp9yuWj6YeMdJsMMcxbbIYeSXBEqEKGCyEy35+aftNunAHmg7vl+37wJFSm5x1MTVoJL5fsZ3J587gF7ihrGs/KQu1FwLQmudaac5KaSLNDnNJbD54XrTvM5l9lTrLcHKOeCIWlGYOF7FGIQvAnVLZrWRjfuROLg9hSQ9jyDNecADZPjBl2TaW53sxgLRWDVem8qiFq9pnV+AdQV0B+SPgfgmpTgQLs08f6ZhWLyCxuXdq/7cnxPxaawMZloe6yOysixYcmVonVKuy4iT1YifWRAna1g8NtOy2meB6oHeZlKFb4Ik27ljriFzGAqsCpriEENSooCRlbN+eksFDKgqOlshQ7SQbiLBW0VqUKXUi1aApju71O1jTUwJoK2ueq0H+o+T7oxXmKM52sdUMwdBIE7y6SA70m0xcvUrhWrj3JA0sCJGlbq2rWix3SLD20KMUZ3i3Gym5CDRQWwaCH33+irmG2Wi/4bCGESoTQrFIQpgmmAaGBMjYlKCuqKCRr26y6PK7oTQSCoDFyihfqFXETmmqyN4rlHrbvU1L7PpYEqQimjWxrSBV/VWIuwNAWsLeY0PEPZRs5P7rJDeokud+arkcJDQnX3K7K5llvl0Kwyz6PbOdtZqVYyZbOeGlqq8EKKpwCoM2FIFR2IY+jVdlocu8shzxCIgS1GHNRchGne3O6qyKC0tQhrEU5LFd9z1EKNLTHrlL4G5VmKH4/tzIgyO7IopMdS0MIAuGlcGgGIGmUuzFQSm4twUONQhCtqjE1TpV0FlnbvqMbKVi/OwBJipYhU0oAhHLJV4jWbYzLLdVQEGR7iYMpUeqxMDUwBZjWuinAD3EyF6wawlMKqxoMYRzOY4bg0MmixOKtxSqmhWyK2LamF6TTeLeTv0c32WMQ108B0MmjAihozcCPCTRG+mQrfALdTdb3TJNwX45dFgWohbXtMwGMsdkVYvUAlULSnlFQCbaSww+9DQIaKAFoMNbYqbCwmakxFuC7CXIQXRfh2gj8A3xXhAHw4GT9TY+9kwsMMp8UqwxWpINiIZHUwMY726kqfN5Q+sVLYATLM8YKTjZm6tUQ4FOF2Fr6bCn8R4W9NqL8f4B8nWArcrVRXjHs0krEGRryYTZV4bymSzFZSdR2THL6AUI8lnwUqSaRmaAKugVcNzAvgVoS/ivD7CV6KcCPVkuJ7NCtbKmTPqurkaoN/FTZWMy89fHKi8r7Y5+vWYapuG8ecIg2Mj5sGdo7PafNMz1uX8eGBKOK1+LXAUJIPlB3vmdUEOGhjK2esgfIKQIEPKxx1WAFm/Ar8tiqPbW6k7ggSRuvk06OBpHxaZLkK+NxX43tkQgAcDGCzsC7GMsHDotwfJt7enyqfT6WaBvj3Cm+BoxmPWil7gVq8thYjKrK7f4rlAbjPnxvivnCP8ULRGmPMqO4lLbBNa7ZfV+WhCHerUn4+wu1c970qcHvgR+DtqvyyKA8OBrBV0dYbdWuFSqHnoh2ichbsFhqKvmSR2I2qtw0twWqr3dRZqQiPi6EzgHJ6cw83U31NAn/6Hf8y416N9woL7aVbTrKmxJ5notfEUii6oM/x4Iws102aKu8csGrGpNVKPs+871mMYzHW13dwmODlXN3uh1e8U+O0VMucaHFkxppqs+gdltnNQyJ1sWPHKuPRrDOakWIraGVpoISt7JceV4K+voPrubrbzQzLH2sNp8ZSpBOItRKsM62kZm/PGmn00ufsnDkh722Fm9ldLrTQtELVNeztt/3nWMFcTfWlVq0SwCg19rTtpbaB7BbJZBWuxZgms1yOIV+QN7EmgAuuQGkHH9ZqOrsqTO8XsKlO+rDCVaEsxmlRTm6RFpvWwJwl0iBbVKTtgOsCdc2nGikCHfJEqCA8kNemYVNDrwpyPXML8OpQme6kcD1zW1rQB8VEMNaauCHRN9ksAJbw6rL7eVvWRKwWBo3F+21z7y7VKuutRdC5ILPw4vU9HNet9puFF4eJMhVMamPXXc7BBMHjc6J3nMWZv4biNJcRyVIS3mOPIrKVOn3+VFBg/vE9fH8LDwu8uQdgKtKLTw3Cejz6wWPcP8sVC4Eh9iX8rN8FzsyWRi+RQqLt1XlbJy8PvLiZ+H4q/Bn4oa19syr/fFR+uj9xbIk0ap34HuNpp/eJwPoYjrEiqIR8+AU7MmDIE91yrXL+sMJ/izGJ8Gub+26Fd6vy2MD0g48IIlUHww/OIbn2FuIpQIOAAUTW0Mdcz6DWd8eFUxHuKDxOxluAFR5PK8eHlZNbJSomJdZoHbfg2YluHnu/sQ7ny/6g0OfHh8XWQ+MZhBp6XHgscJoL7327R0V11P6QQOPe7fmdrgPwJ8fe70Pd/HFhqp3OzJ/nAyxa531YWcP67UG2daJZ2FTHuUJzGfbRGNobcYP47sHvD41VeNZk13QCcyZMcrl+UivSma9f36n7LgIUk+heqRFPUjvlprn5ODczF2Gv4dlPpJFdID6e80+S7vO5qw0Pj/Qb/T+2JxEwYb/hVCe5ouW9nxoX/WicNRk/Jy0ONOtWcheJ39kUEVuW3SIZhs71ywE5Ls61lE9X+/WUCNm5F10sMlmPwbjmUiGfA2jP97eb4Y9IqVIfrLpXQae5BJe+GIiPZ/8bKwkrMXZiXBC0HPsozl3yqfFsMPBlfwA8e2Bwk6EhhA6qX/9/ja/xj8Y4csIbvst4cJmr+c+ySB7/A5p05mnftr1GAAAAAElFTkSuQmCC',
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:'測試次數(shù)',
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: '測試次數(shù)',
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]
}
]
}
