echarts 雷达图的tooltip 设置为trigger: ‘axis‘ 失效

最新推荐文章于 2024-06-29 11:41:30 发布

baidu_21162739

最新推荐文章于 2024-06-29 11:41:30 发布

阅读量881

点赞数

分类专栏：前端技能库文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/baidu_21162739/article/details/128457444

版权

前端技能库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

可以参考这个大神的代码：[ECharts]雷达图tooltip显示当前轴数据 – 皮特胖搬砖日志

<template>
  <div class="base_containor">
    <div class="echarts">
      <v-chart ref="radar" :option="options" @legendselectchanged="selectChanged"></v-chart>
    </div>
  </div>
</template>

<script>
export default {
  name: "radar",
  data(){
    return{
      //数据定义
      options:{

      },
      radarData:[{
        name: "<500每月",
        toolTip:'<500每月',
        max:10000,
        value: 4000,
      },
        {
          name: "500～1000\n每月",
          toolTip:'500～1000\n每月',
          max:10000,
          value: 8000,
        },
        {
          name: "1000～1500\n每月",
          max:10000,
          value: 10000,
        },
        {
          name: "1500～2000\n每月",
          max:10000,
          value: 6000,
        },
        {
          name: "≥2000元\n每月",
          max:10000,
          value: 5000,
        },
      ],
    }
  },
  mounted() {
    //初始化区
    this.$nextTick(() => {
      this.setChartData();
      this.$refs.radar.resize();
    });
    this.onResize(this.$refs.radar);
    console.log('chart',this.$refs.radar,this.radar)
  },
  beforeDestroy() {
    this.onRemoveResize(this.$refs.radar);
  },
  methods:{
    selectChanged(params){
    console.log("图例监听",params)
    },
    //添加监听
    onResize(chartObj){
      window.addEventListener('resize',function (){
        chartObj.resize();
      })
    },
    //删除监听
    onRemoveResize(chartObj){
      window.removeEventListener('resize',function (){
        chartObj.resize();
      })
    },
    setChartData(){
      let dataArr = [];
      let radarList=[];
      this.radarData.forEach((item) => {
        dataArr.push(item.value);
        radarList.push(item.name.replace('\n',''));
      });
      const buildSeries = function(data){
        const helper = data.map((item, index) => {
          const arr = new Array(data.length);
          arr.splice(index, 1, item);
          return arr;
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            symbol: index === 0 ? 'circle' : 'none',
            symbolSize: 5, //圆圈大小
            lineStyle: {
              width:'1',
              color: index === 0 ? 'rgba(32, 152, 232, 1)' : 'transparent'
            },
            itemStyle: { //调点的样式
              show: true,
              color: "rgba(32, 189, 232, 1)",
              borderColor:'#fff',
              // shadowColor: 'rgba(32, 189, 232, 1)',
              // shadowBlur: 10,
              fontSize: 20,
            },
            areaStyle: {
              // 内网颜色
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0, 224, 255, 0.25)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(2, 112, 255, 0.75)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                opacity: 1,
              }
            },
            tooltip: {
              show: index === 0 ? false : true,
              confine:true,//防止溢出
              backgroundColor: 'rgba(5, 58, 87, 0.26)',
              borderColor:'rgba(216, 216, 216, 0.43)',
              textStyle:{
                color:'rgba(255,255,255,0.8)',
              },
              formatter: function() {
                return radarList[index - 1] + '\t<span style="font-size:14px;font-family:DDINBold;">' + dataArr[index - 1]+'</span>套';
              }
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      };


     let option = {
        // backgroundColor: 'rgba(0, 0, 0, 1)',
        title: {
          top: '48%',
          bottom:'center',
          left: 'center',
        },
       tooltip: {},
        radar: {
          center: ['50%', '50%'],
          radius: "60%",
          splitNumber: 5,
          name: {
            textStyle: {
              color: "rgba(255, 255, 255, 0.85)",
              borderRadius: 3,
              fontSize: 12,
            },
          },
          nameGap: "5",
          indicator: this.radarData,
          // 圈圈网颜色
          splitLine: {
            show: true,
            lineStyle: {
              // color:'rgba(115, 126, 135, 1)',
              color: [
                'rgba(115, 126, 135, 1)', 'rgba(115, 126, 135, 0.8)', 'rgba(115, 126, 135, 0.6)',
                'rgba(115, 126, 135, 0.6)', 'rgba(115, 126, 135, 0.8)'
              ],
              width: '0.5'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(119, 140, 162, 0.1)'
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(115, 126, 135, 1)",
            },
          },
        },
       series: buildSeries(dataArr),
      };
     this.options = option;
    }
  }
}
</script>

<style scoped lang="scss">
.base_containor{
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  width: 100%;
  height: 96%;
  .echarts{
    height: 100%;
    #3dBar {
      width: 100%;
      height: 100%;
    }
  }
}
</style>