echarts版本號(hào)： 4.9.0
<template>
<div id="chart" style="width: 382px;height: 250px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'chart',
data () {
return {
indicator: [{
name: '經(jīng)營能力',
max: 5
},
{
name: '創(chuàng)新能力',
max: 5
},
{
name: '技術(shù)能力',
max: 5
},
{
name: '服務(wù)能效',
max: 5
},
{
name: '生態(tài)能力',
max: 5
}],
value: [4,3,4,4,3]
}
},
watch: {
chartData () {
this.getData()
}
},
mounted () {
this.loadLeida ()
},
methods: {
loadLeida () {
if (this.indicator.length == 0) {
return
}
const option = {
// backgroundColor: '#111b29',
color: ['#3D91F7', '#61BE67'],
tooltip: {
show: false,
triggerOn: 'mousemove',
position: 'top',
backgroundColor: 'rgba(255, 255, 255, 0.3)', // 使用RGBA格式指定顏色及透明度
textStyle: {
color: '#000' // 文字顏色
},
formatter: function () {
return '';
}
},
radar: {
radius: '60%',
// center: ['50%', '55%'], // 外圓的位置
name: {
textStyle: {
color: '#8E99B2',
fontSize: 14,
fontWeight: 400,
fontFamily: 'SourceHanSansCN, SourceHanSansCN'
}
},
// TODO:
indicator: this.indicator,
splitArea: {
// 坐標(biāo)軸在 grid 區(qū)域中的分隔區(qū)域，默認(rèn)不顯示屹电。
show: false,
areaStyle: {
color: 'rgba(255,0,0,0)', // 圖表背景的顏色
},
// areaStyle: {
// // 分隔區(qū)域的樣式設(shè)置迅皇。
// color: ['#1c2330'] // 分隔區(qū)域顏色那伐。分隔區(qū)域會(huì)按數(shù)組中顏色的順序依次循環(huán)設(shè)置顏色。默認(rèn)是一個(gè)深淺的間隔色觉增。
// }
},
},
series: [{
type: 'radar',
label: {
show: false,
formatter: function (params) {
if (params.value !== 0) {
return params.value + '級(jí)';
} else {
return '';
}
},
color: '#000',
fontSize: 12,
distance: 0,
},
symbolSize:6,
data: [
{
value: this.value,
name: '數(shù)字化轉(zhuǎn)型服務(wù)評(píng)估報(bào)告',
itemStyle: {
normal: {
color: '#5B8FF9',
lineStyle: {
color: '#5AD8A6',
},
},
},
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: 'rgba(59,129,255,0.2)',
offset: 0
}
])
}
}
]
}]
}
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(option)
chart.on('mousemove', (params) => {
let num = params.event.topTarget.__dimIdx;
console.log(num)
if (num === undefined) {
option.tooltip.show = false;
option.tooltip.formatter = function () {
return '';
};
} else {
option.tooltip.show = true;
option.tooltip.formatter = function (params) {
return (
params.data.value[num] + "級(jí)"
);
};
}
chart.setOption(option)
})
}
}
};
</script>
<style lang="scss" scoped></style>
image.png
