vue 雷达扫描_Vue-Echarts实现雷达图
效果：image.png安装依赖npm i echarts --save引入import echarts from 'echarts'Vue.prototype.$echarts = echarts应用methods: {initRadar() {let charts = this.$echarts.init(document.getElementById('leiDaTu'));var opti
效果：
image.png
安装依赖
npm i echarts --save
引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
应用
methods: {
initRadar() {
let charts = this.$echarts.init(document.getElementById('leiDaTu'));
var option = {
title: {
text: "智能评价",
textAlign: 'left',
},
calculable: true,
radar: {
splitNumber: 4,
shape: 'circle',
name: {
formatter: [`{a|${this.type}}`,
'{b|{value}}'].join('\n'),
rich: {
a: {
color: 'rgba(5, 193, 174, 1)',
align: 'middle'
},
b: {
color: '#333'
},
}
},
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: '#ededed',
// 坐标轴线线的颜色。
width: 1,
// 坐标轴线线宽。
type: 'solid',
// 坐标轴线线的类型。
}
},
center: ['50%', '50%'],
radius: '50%',
startAngle: 90,
indicator: [{
name: '词汇词组',
max: 100
},
{
name: '语法句子',
max: 100
},
{
name: '内容立意',
max: 100
},
{
name: '篇章结构',
max: 100
}],
splitArea: {
show: false
},
// (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
splitLine: {
lineStyle: {
color: '#ededed', // 设置网格的颜色
},
},
},
series: [{
type: 'radar',
symbol: "none",
lineStyle: {
color: 'rgba(5, 193, 174, .1)'
},
areaStyle: {
color: 'rgba(5, 193, 174, 1)' // 选择区域颜色
},
data: [{
value: [70, 80, 90, 85]
}]
}]
}
charts.setOption(option);
}
},
created() {
this.$nextTick(function () {
this.initRadar('radar_canvas')
})
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)