1.凡例のカスタマイズ
実現効果：
//首先引入
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,//间距
}上記で凡例をカスタマイズしましたが、よく見ると凡例とテキストが同じ水平線上にないことがわかります。リッチテキスト設定を使用して高さを調整し、凡例画像とテキストを揃えます。
実現効果：
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. ツールチップフローティングボックスの表示内容
このディメンションのすべてのデータはデフォルトで公式ドキュメントに表示されます
遭遇する要件は、マウスがホバリングしているときに軸のデータ比較を表示することです。
成し遂げる：
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]//雷达图拐点年段及格率
})ツールチップのカスタマイズが実装されましたが、小さな欠陥がまだあります。凡例をクリックしてシリーズ データを非表示にすると、ツールチップを動的に表示できません。
解決策は 2 つあります。
- 凡例のクリック イベントをオフにする (最も単純かつ粗雑な方法)
- legendselectchanged イベントをバインドすることで凡例の選択された値 (true および false) を取得し、この値に基づいてツールヒントのスタイルを制御します。
実装コード:
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问题
}
}
},
予防：
- classLegend などに値を代入する場合、this.classLegend.click=params.selected のように値を直接代入することはできません。このクラスの合格率については、this.$set を使用する必要があります。直接代入は応答しません。クリック値はツールチップでは取得できず、凡例をクリックすると変化します。
- legendselectchanged イベントのバインドはアロー関数として記述し、this を取得し、データ内の this.classLegend を取得する必要があります。
実現効果：
