1. Legend customization
Realization effect:
//首先引入
import orangeIcon from '../../../../assets/images/class_statistical/icon1.png';
//使用
legend: {
show: true,
data: [{
name: '本班及格率',
icon: 'image://' + blueIcon + ''
},
{
name: '年级及格率',
icon: 'image://' + orangeIcon + ''
}],
x: 'right',
y: 'top',
itemWidth: 40,
itemHeight: 13,
itemGap: 40,//间距
}Although the legend has been customized above, if you look closely, you will find that the legend and the text are not on the same horizontal line. Use rich text configuration to adjust the height to align the legend image with the text.
Realization effect:
legend: {
selectedMode: false,
show: true,
data: [{
name: '本班及格率',
icon: 'image://' + blueIcon,
},
{
name: '年级及格率',
icon: 'image://' + orangeIcon
}],
selected: {
'本班及格率': true,
'年级及格率': true
},
x: 'right',
y: 'top',
itemWidth: 40,
itemHeight: 13,
itemGap: 40,//间距
formatter:['{a|{name}}'].join('\n'),//实现图例与文字对齐
textStyle:{//实现图例与文字对齐
height:9,
rich:{
a:{
verticalAlign:'bottom'
}
}
}
},2. Display content of tooltip floating box
All data in this dimension are displayed by default in the official documents
The requirement encountered is to display the data comparison of the axis when the mouse is hovering.
accomplish:
passChart.setOption({//各科及格率对比分析
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
show: true,
showContent: true,
backgroundColor: "#fff",
extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
textStyle: {
color: "#333333" //设置文字颜色
},
formatter: (params) => {//自定义绘制tooltip
let str = ''
str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
<h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
<ul style="margin:0;paddding:0;list-style:none;color: #333333;font-size: 14px;">
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
</li>
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
</li>
</ul>
</div>`
return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
}
},
legend: {
show: true,
data: [{
name: '本班及格率',
icon: 'image://' + blueIcon + ''
},
{
name: '年级及格率',
icon: 'image://' + orangeIcon + ''
}],
x: 'right',
y: 'top',
itemWidth: 40,
itemHeight: 13,
itemGap: 40,//间距
},
radar: [
{
shape: 'circle',
splitNumber: 5,
indicator: this.subScoreMax,
radius: 150,
shape: 'circle',
axisName: {
color: '#333333'
},
axisLine: {//圆分隔线
lineStyle: {
color: '#C8DBF8'
}
},
splitLine: {//列分隔线
lineStyle: {
color: '#C8DBF8'
}
},
splitArea: {//背景圈颜色
show: true,
areaStyle: {
color: ['rgb(252,255,255)', 'rgb(240,251,255)']
}
}
},
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
show: true,
showContent: true,
backgroundColor: "#fff",
padding: 20, //内边距
extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
textStyle: {
color: "#333333" //设置文字颜色
},
},
data: [
{
value: ,//数据
name: '本班及格率',
subjectName: this.subScoreMax,
lineStyle: { color: '#3d7eff' },
itemStyle: {
color: '#FFFFFF', borderColor: '#3d7eff', borderWidth: 2, //实现空心圆点
},
areaStyle: {//区域颜色覆盖
color: '#3d7eff',
width: 1,
opacity: 0.15
},
},
{
value: ,//数据
name: '年级及格率',
lineStyle: { color: '#f4a359' },
itemStyle: {
color: '#FFFFFF', borderColor: '#f4a359', borderWidth: 2 //实现空心圆点
},
areaStyle: {//区域颜色覆盖
color: '#f4a359',
width: 1,
opacity: 0.15
}
}
]
},
]
})
passChart.on('mouseover', (params) => {//写成箭头函数，获取到vue实例对象上的数据
this.isDot = params.event.target.__dimIdx;//获取鼠标停留拐点的数据
this.classPass = this.subListClone[this.isDot].passing_rate[0]//雷达图拐点本班及格率
this.gradePass = this.subListClone[this.isDot].passing_rate[1]//雷达图拐点年段及格率
})Although tooltip customization has been implemented, there is still a small flaw: when the legend is clicked to hide the series data, the tooltip cannot be displayed dynamically:
There are two solutions:
- Turn off the click event of the legend (the simplest and crudest)
- Obtain the selected value (true and false) of the legend by binding the legendselectchanged event, and control the tooltip style based on this value.
Implementation code:
classLegend: { click: true },//data中存放图例点击的值
gradeLegend: { click: true },//data中存放图例点击的值
passChart.on("legendselectchanged", (params) => {//获知图例点击时的true和false
this.$set(this.classLegend, 'click', params.selected.本班及格率)
this.$set(this.gradeLegend, 'click', params.selected.年级及格率)
})
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
show: true,
showContent: true,
backgroundColor: "#fff",
extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
textStyle: {
color: "#333333" //设置文字颜色
},
formatter: (params) => {
let str = ''
if (this.classLegend.click) {//tooltip展示该维度所有数据
str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
<h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
<ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
</li>
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
</li>
</ul>
</div>`
return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
} else if (this.gradeLegend.click) {//legend点击tooltip仅展示年级及格率
str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
<h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
<ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
</li>
</ul>
</div>`
return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
} else if(this.classLegend.click) {//legend点击tooltip仅展示年级及格率
str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
<h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
<ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
<li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
<p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
</li>
</ul>
</div>`
return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
}
}
},
Precautions:
- When assigning values to classLegend, etc., you cannot directly assign values: this.classLegend.click=params.selected. For the passing rate of this class, you must use this.$set. Direct assignment is not responsive. The click value cannot be obtained in the tooltip and changes with the click of the legend. .
- Binding the legendselectchanged event should be written as an arrow function, get this, and get this.classLegend in the data.
Realization effect:
