highchart 的蜘蛛图（雷达图）将图例样式改

天空之枫

于 2023-06-06 22:39:39 发布

阅读量500

点赞数

分类专栏： vue 文章标签： vue.js highchart

本文链接：https://blog.csdn.net/sinat_24713805/article/details/131060255

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

修改图例样式分为两种情况：
一，在不改变蜘蛛图数据点样式的情况下，修改图例样式。

二，在去除蜘蛛图数据点样式的情况下，修改图例样式。

针对第一种情况，修改plotOptions.series下的宽高属性，以及圆角弧度，然后在legend下设置symbolWidth宽度

plotOptions: {
   series: {
     lineWidth: 3, // 设置数据线的宽度为 5 像素
     marker: {
        radius:0
     }
   }
},

legend: {
  align: 'center',al',
  symbolWidth: 5, // 设置图例项的符号宽度为 20 像素
}

针对第二种情况，需先隐藏数据点不可见，在修改对应的css样式

plotOptions: {
  series: {
    marker: {
      enabled: false // 设置数据点不可见
    }
  }
},


legend: {
  symbolWidth: 15, // 设置图例项的符号宽度为 15 像素
}


//修改图例的宽度
/deep/.highcharts-legend-item{
    .highcharts-graph{
        stroke-width:13;
        stroke-linecap:butt
    }
}