Echarts雷达图图例、名称字体颜色修改

EVIL_BAND1T

已于 2024-09-27 15:55:51 修改

阅读量236

点赞数 4

文章标签： echarts 前端 javascript

于 2024-09-26 11:08:58 首次发布

本文链接：https://blog.csdn.net/EVIL_BAND1T/article/details/142550510

版权

先看效果 p1是设置的图表组件默认字体颜色黑色

将组件放入数据大屏因为模板背景颜色为深色，字直接就看不清了，这里我将字体颜色默认调成了白色，为了功能性，所以我还是做一个rgb调色盘可以让用户自己来选择喜欢的字体颜色

接下来上代码

1.组件绑定css样式引入chartStyle 样式数据从数据大屏那边传过来

<template>
  <div ref="chart" :style="chartStyle">ChartRadar</div>
</template>

 watch: { //监听CSS颜色
    chartStyle() { 
      let flag = false
      if(this.chartStyle.color && this.calcOption.radar.name.textStyle.color !==                                     
      this.chartStyle.color){ //颜色发生改变触发重新渲染
        flag = true
      }

      if(flag){
         //重新渲染组件
        this.renderChart()
      }
    },
}

renderChart() {
  let option = Object.assign({}, this.chartOption, this.calcOption)
  option.legend.data = this.calcData.legendData
  option.radar.indicator = this.calcData.radarIndicator
  option = JSON.parse(JSON.stringify(option))

  if(this.chartStyle.color){
    if(!option.legend.textStyle){ //图例样式先判空
      option.legend.textStyle = {}
     }
     option.legend.textStyle.color = this.chartStyle.color //图例字体颜色修改

     //名称字体颜色修改
     if(this.chartStyle.color &&  this.calcOption.radar.name.textStyle.color !==             
     this.chartStyle.color){
       let temp1 = this.calcOption.radar.name.textStyle
       this.$set(temp1, 'color', this.chartStyle.color)
     }
  }
}