echarts版本号: 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: '经营能力',
max: 5
},
{
name: '创新能力',
max: 5
},
{
name: '技术能力',
max: 5
},
{
name: '服务能效',
max: 5
},
{
name: '生态能力',
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: {
// 坐标轴在 grid 区域中的分隔区域,默认不显示。
show: false,
areaStyle: {
color: 'rgba(255,0,0,0)', // 图表背景的颜色
},
// areaStyle: {
// // 分隔区域的样式设置。
// color: ['#1c2330'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
// }
},
},
series: [{
type: 'radar',
label: {
show: false,
formatter: function (params) {
if (params.value !== 0) {
return params.value + '级';
} else {
return '';
}
},
color: '#000',
fontSize: 12,
distance: 0,
},
symbolSize:6,
data: [
{
value: this.value,
name: '数字化转型服务评估报告',
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] + "级"
);
};
}
chart.setOption(option)
})
}
}
};
</script>
<style lang="scss" scoped></style>