e-charts玫瑰图和雷达图

一、需求

二、实现效果

三、代码

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
      show:false,
      top: 'bottom'
  },
  radar: [
      {
          indicator: [
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
          ],
          center: ['50%', '50%'],
          radius: '65%',
          startAngle: 90,
          splitNumber: 12,
          shape: 'circle',
          name: {
              formatter: '',
              textStyle: {
                  color: '#72ACD1'
              }
          },
          splitArea: {
              areaStyle: {
                  color:'#fff',
                  shadowBlur: 20,
                  shadowColor:'rgba(0,0,0,0.3)',
              }
          },
          axisLine: {
              lineStyle: {
                  color: '#d4d4d4'
              }
          },
          splitLine: {
              lineStyle: {
                  color: '#d4d4d4'
              }
          }
      },
  ],
  toolbox: {
      show: false,
  },
  series: [
      {   
          name: '交流协作',
          type: 'pie',
          radius: [50, 230],
          center: ['50%', '50%'],
          roseType: 'area',
          hoverAnimation:false,
          itemStyle: {　 //去除饼图的指示折线label
              normal: {
                  label: {
                      show: true,
                  },
                  labelLine: {
                      show: false,
                      length:28
                  },
                  borderRadius: 8
              },

          },
          data: [
              {value: 40, name: '应用服务中心'}, 
              {value: 32, name: '技术管理'},
              {value: 30, name: '综合管理'},
              {value: 30, name: '进度管理'},
              {value: 28, name: '质量管理'},
              {value: 28, name: '安全管理'},
              {value: 18, name: '其它'},
            
          ]
      }
  ]
};

4.参考文档

https://zhuanlan.zhihu.com/p/360672188https://zhuanlan.zhihu.com/p/360672188https://blog.youkuaiyun.com/weixin_49326936/article/details/123245948https://blog.youkuaiyun.com/weixin_49326936/article/details/123245948

5.升级版

 6.配置

option = {
	angleAxis: {
		type: 'category',
		data: ['应用服务中心', '技术管理', '综合管理', '进度管理', '质量管理','安全管理','其它']
	},
	  radar: [
      {
          indicator: [
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
              {text: ''},
          ],
          radius: '80%',
          splitNumber: 12,
          shape: 'circle',
          splitArea: {
              areaStyle: {
                  color:'#fff',
              }
          },
          axisLine: {
              lineStyle: {
                  color: '#d4d4d4'
              }
          },
      },
  ],
	radiusAxis: {
		min: 0,
		max: 20,
		interval: 2,
		// 刻度
		axisTick:{
		  show:false
		},
		//刻度数值
		axisLabel:{
		  show:false
		},
		// 线
		axisLine:{
		  show:false
		},
	},
	polar: {},
	series: [
		{
			stack: 'a',
			type: 'pie',
			radius: '55%',
			radius: [60, 260],
      center: ['50%', '50%'],
			roseType: 'area',
			itemStyle: {　 //去除饼图的指示折线label
          normal:{
              label: {
                  show: false,
              },
              borderRadius: 8
          },
      },
			data: [
				  {value: 40, name: '应用服务中心'}, 
          {value: 32, name: '技术管理'},
          {value: 30, name: '综合管理'},
          {value: 30, name: '进度管理'},
          {value: 28, name: '质量管理'},
          {value: 28, name: '安全管理'},
          {value: 18, name: '其它'},
			]
		}
	]
}
		

7.更多e-charts相关图表

EChartsDemo集EChartsDemo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.comhttps://www.isqqw.com/