Echartのレーダー図(Radar)リッチテキスト使用ノート
2942 ワード
まず、私がechart公式サイトで使っているカスタムパッケージをダウンロードしました.ダウンロードしたのはレーダー図に関するjsファイルだけです.
インポート:
インポート:
option: {
title : {
},
tooltip : {
},
legend: {
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
radar:
{
name: {
formatter:(params)=>{
// formatter ， `{|}`
console.log(params);
let a = params.split(',')[0];
let b = params.split(',')[1];
return '{top|'+a+'}' + '
' + '{end|'+b+'}'
},
//
rich:{
//
top: {
color: '#525353',
fontFamily: 'Microsoft YaHei',
fontSize: 13,
fontWeight: 600,
align: 'center',
},
//
end:{
color: '#FF626C',
fontFamily: 'Microsoft YaHei',
fonSize: 24,
fontWeight: 600,
align: 'center',
}
}
},
indicator : [
{ text: ' ,60%', max: 6000},
{ text: ' ,70%', max: 16000},
{ text: ' ,80%', max: 30000},
{ text: ' ,90%', max: 38000},
{ text: ' ,30%', max: 52000},
],
splitArea : {
show : true,
areaStyle : {
color: ['#FF6B75','#FF9198', '#FFB1B6', '#FFD3D6', '#FFEFF0']
//
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : []
//
}
}
}
,
calculable : true,
series : [
{
name: ' vs （Budget vs spending）',
type: 'radar',
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : ' （Allocated Budget）',
symbol: 'circle', // ， 'rect','angle'
symbolSize: 8, //
symbolBorderColor: '#FF7D36',
lineStyle: {
color: '#FF5A00'
}
},
]
}
]
}var radarEchart = echarts.init(this.$refs.echart);
// 。
radarEchart.setOption(this.option);