Vue引入echarts.js轻松实现雷达图(现成代码,复制粘贴可用)
引入echarts.js轻松实现雷达图
-
- 临时的需求
-
- 引入
- 相关代码参考
临时的需求
业务这边想针对女性做一个创意测评活动,端午前的周五临近下班才给到比较明确的开发需求跟修改后的设计稿,希望周一上线,测评结果部分需要有雷达图展示,所以引入echarts.js来实现雷达图
效果图如下 – 点我可体验页面
引入
echarts官网介绍
cnpm install echarts --save
import echarts from 'echarts'
<div class="chart-wrap">div>
雷达图官网重点看下面两个内容
this.radarOption.radar.indicator: 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator对应官方文档位置this.radarOption.series:系列列表。每个系列通过 type 决定自己的图表类型
series对应官方文档位置
相关代码参考
相关代码参考如下
data() {
return {
index1: [], // 问题1 已被选中答案index(多选)
index2: [],
index3: [],
index4: [],
index5: [],
index6: [],
// 雷达图的数据
radarOption: {
splitNumber: 3,
radar: {
// shape: 'circle',
center: ['50%', '50%'],
name: {
textStyle: {
// 文字样式
color: '#fff',
fontWeight: 'bold'
}
},
indicator: [
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
{
name: '月经',
max: 3
},
{
name: '白带',
max: 3
},
{
name: '外阴',
max: 3
},
{
name: '性生活',
max: 3
},
{
name: '尿道',
max: 3
},
{
name: '腰腹',
max: 3
}
]
},
// 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
splitArea: {
show: true,
areaStyle: {
color: 'rgba(255,0,0,0)' // 图表背景的颜色
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(131,141,158,.1)' // 设置网格的颜色
}
},
series: [
{
name: '雷达图', // tooltip中的标题
type: 'radar', // 表示是雷达图
symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
symbolSize: 8, // 拐点的大小
areaStyle: {
normal: {
width: 1,
opacity: 0.2
}
},
data: [
{
// 设置各个指标原始值
value: [2, 3, 1, 2, 1, 0],
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
color: 'rgba(255,225,0,1)',
lineStyle: {
color: 'rgba(255,225,0,1)'
}
}
}
}
]
}
]
}
}
}
展示结果页面时,初始化雷达图
this.$nextTick(() => {
// 雷达图显示的标签
const chartObj = echarts.init(this.$el.querySelector('.chart-wrap'))
// 下面是根据6道测评题目动态获取雷达图各指标的值,看各自业务灵活调整
// 第五题 第二个选项才是正常 其他都是第一个选项正常 this.index1 问题一选中的index数组
this.radarOption.series[0].data[0].value[0] = this.index1.includes(0) ? 0 : this.index1.length
this.radarOption.series[0].data[0].value[1] = this.index2.includes(0) ? 0 : this.index2.length
this.radarOption.series[0].data[0].value[2] = this.index3.includes(0) ? 0 : this.index3.length
this.radarOption.series[0].data[0].value[3] = this.index4.includes(0) ? 0 : this.index4.length
this.radarOption.series[0].data[0].value[4] = this.index5.includes(1) ? 0 : 3
this.radarOption.series[0].data[0].value[5] = this.index6.includes(0) ? 0 : (+this.index6.length === 1 ? 1.5 : 3)
// 初始化雷达图
chartObj.setOption(this.radarOption)
})
看到这里,直接复制代码,根据自己业务需要灵活调整,即使不看echarts文档,也能够直接使用,
效果图如下 – 点我可体验页面
谢谢你阅读到了最后
期待你 点赞、评论、收藏、关注