echarts-radar雷达图

最新推荐文章于 2024-04-01 15:09:16 发布

原创最新推荐文章于 2024-04-01 15:09:16 发布 · 631 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用SVG渲染的雷达图实例，通过ECharts库实现，详细配置了雷达图的各项属性，如字体样式、米轴、分割线等，并展示了如何设置数据系列。

在这里插入图片描述

<div id="radar-chart" style="width: 400px;"></div>

<script>
export default{
	data(){
		return {}
	},
	mounted(){
		this.init()
	},
	methods:{
		init () {
      	  const radarChart = this.$echarts.init(document.getElementById('radar-chart'), null, {renderer: 'svg'})
	      let option = {
	        radar: [{
	          center:['50%','50%'],
	          radius: '75%',
	          //图外名称
	          name: {
	            formatter: '{value}',
	            // 字体样式
	            textStyle: {
	              fontSize: 12,
	              color: '#888'
	            }
	          },
	          indicator: [
	            { name: "A", max: 10 ,axisLine:{lineStyle:{color:'#888'}}},
	            { name: "B", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "C", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "D", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "E", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "F", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "G", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
	            { name: "H", max: 10 ,axisLabel:{show:false},axisTick:{show:false}}
	          ],
	          nameGap: 12,
	          axisLine: { //米轴
	            show: true,
	            lineStyle: {
	              color: '#ccc',
	            },
	          },
	          axisTick:{
	            show:true,
	            length:3
	          },
	          splitNumber: 5, //轴的分割段数
	          axisLabel: { // 显示刻度值
	            show:true,
	            color:'#888',
	            fontSize:10,
	            margin:10
	          },
	          splitLine: {
	            lineStyle: {
	              color:"#e4e4e4"
	            }
	          },
	          splitArea: {
	            areaStyle: {
	              color: ['#fff'],  //雷达背景
	            }
	          }
	        }],
	        series: [{
	          name: "评估",
	          type: "radar",
	          data: [{
	            value: [7.7, 5, 6.6, 7.3, 6.7, 8, 5, 6.7],
	            name: "评估",
	            symbolSize:5,
	            itemStyle: { // 拐点
	              normal: {
	                borderColor: '#1890FF',
	                borderWidth: 1,
	                color: "#fff"
	              }
	            },
	            lineStyle:{  // 折线
	              color:'#1890FF',
	              width:1.5
	            },
	            areaStyle: { // 区域填充
	              normal: {
	                color: 'rgba(24,144,255,0.3)'
	              }
	            }
	          }],
	        }]
	      }
	      radarChart.clear();
	      setTimeout(()=>{radarChart.setOption(option)},100)
       }
	}
}
</script>