echarts雷达图详细参数配置说明

应项目需求需要实现以下效果(当然也是最终的实现)：

接下来主要关于下面的几个参数进行设置

雷达图的圈数
雷达图支持绘制的类型：圆形和多角形
雷达图在容器中的位置：center决定也就是雷达图中心在容器的位置
雷达图每个方向的文字配置
雷达图每个方向的文字到雷达图的距离：指示器名称和指示器轴的距离。
雷达图中心发出的射线：坐标轴轴线相关设置
雷达图每一圈，这个圈的样式： splitLine坐标轴在 grid 区域中的分隔线
雷达图每一圈所分割出的区域的样式
雷达图每一个焦点的样式
雷达图每一个圈值，这个值组成的线的样式
关于echarts图例的具体配置说明.
关于echarts雷达图的具体配置项说明.

export default {data() {return {selfRating:[4300, 10000, 28000, 35000, 50000],seniorRating:[6000, 14000, 28000, 31000, 42000]};},created() {},mounted() {var radar = echarts.init(document.getElementById("radar_container"));// 绘制图表var option = {tooltip: {},//图例legend: {type: "plain",//图例的类型show: true,//是否显示图例data: ["自我评分", "师兄评分"],right: 40,top: 230,orient: "vertical",itemGap: 29,itemWidth: 19,itemHeight: 7,textStyle: {fontSize: 18,fontFamily: "Source Han Sans CN",fontWeight: "bold",color: "#333333",},},radar: {// shape: 'circle', //雷达图绘制类型(圆型和多角形)，支持 'polygon' 和 'circle',默认    是'polygon'splitNumber: 4, // 雷达图圈数设置center:[220,180],//雷达图位置：中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。name: {//每个方向的文字配置：也就是，软件，业务，技能，素质，爱好这些字的配置show: true,fontSize: 18,fontFamily: "Source Han Sans CN",fontWeight: "bold",color: "#333333",// padding: [3, 5],},nameGap = 15 //指示器名称和指示器轴的距离。axisLine: {show: false, //雷达图中心发出的射线：坐标轴轴线相关设置},splitLine: {//雷达图每一圈，这个圈的样式show: true,lineStyle: {type: "dashed"}},splitArea: {// 雷达图每一圈所分割出的区域的样式show: true},indicator: [{ name: "软件", max: 6500},{ name: "业务", max: 16000 },{ name: "素质", max: 30000 },{ name: "爱好", max: 38000 },{ name: "技能", max: 52000 },//   { name: "市场", max: 25000 },],},series: [{type: "radar",// areaStyle: {normal: {}},symbol: "circle", // 焦点的样式，还可以取值'rect','angle'等symbolSize: 0, // 焦点的大小data: [{value: this.selfRating,name: "自我评分",itemStyle: {//雷达图每一个焦点的样式normal: {color: "rgba(252, 154, 14, 1)",lineStyle: {color: "rgba(252, 154, 14, 1)",},},},},{value: this.seniorRating,name: "师兄评分",itemStyle: {normal: {color: "rgba(46, 90, 251, 1)",lineStyle: {color: "rgba(46, 90, 251, 1)",},},},},],},],};radar.setOption(option);},methods: {},computed: {},
};

具体的配置项说明可以参考11和12

eacharts想熟练只有一个方法，就是自己创建一个demo自己多常识：绝知此事须躬行
欢迎交流

echarts雷达图详细参数配置说明相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
Echarts雷达图的详细配置
写一个完整的雷达图需要注意那些,或者要修改那些?大约一共这些我将代码放下在官网可以自己根据备注自己调试 option = {backgroundColor:'#000',radar: {// sh ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...
echart雷达图详细配置
echart雷达图参数配置我是个搬运工,这里是搬运别的大佬的.之前网上找了好久才找到的配置,怕下次难得找,直接搬过来了原链接:原链接 // 指定图表的配置项和数据 var option = {ba ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...
Echarts雷达图显示单轴数据
最近总是碰到这种雷达图的需求,在雷达图中需要显示单项数据,并且需要使用富文本,这个在echarts当中2.0版本之前是可以显示单项数据,但是却没有富文本,4.0中有富文本却没有单项数据显示,并且现在对 ...
ECharts 雷达图在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...

echarts雷达图详细参数配置说明

echarts雷达图详细参数配置说明相关推荐

最新文章

热门文章