echarts 实现空心饼状图中间展示选中块内容带默认展示文本效果

今天也是爱大大的一天吖

已于 2023-05-24 11:11:02 修改

阅读量2k

点赞数

文章标签： echarts 前端 javascript vue.js

于 2023-05-22 19:41:37 首次发布

本文链接：https://blog.csdn.net/qq_45560350/article/details/130813539

版权

实现效果

默认文本展示
在这里插入图片描述
选中块文本展示

实现代码

// echarts的label配置
  label: {
    show: true, // show属性很关键 show为true时 初始化时即会展示默认文本；show为false时，只有在鼠标悬浮在块上时 才会展示相应文本
    position: 'center', // 文本展示位置
    formatter:() => { // 格式化要展示的文本
      return `{key|管线总长}\n{length|${totalCount}km}` // totalCount为自定义需要展示的属性 默认文本
    },
    rich: {
    //文本样式
      key:{
        fontSize: 25,
        fontFamily : "微软雅黑",
        color:'#454c5c',
        backgroundColor:"white" // 解决偶现文本重叠问题
      },
      length: {
        fontFamily : "微软雅黑",
        fontSize: 16,
        color:'#6c7a89',
        lineHeight:30,
        backgroundColor:"white" // 解决偶现文本重叠问题
      },
    }
  },
  labelLayout:{
    hideOverlap:true // 隐藏重叠的标签
  },
  -------------------------
  // 添加鼠标移入移出事件的监听
   this.$nextTick(()=>{
    //鼠标移开的监听事件 展示默认字段
     this.$refs.pieChart.pieChart.on('mouseout', ()=>{
       this.$refs.pieChart.pieChart.setOption({
        series:{
           label:{
             show:true,
             formatter:() => {
               return `{key|管线总长}\n{length|${this.totalCount}km}`
             },
           }
         }
       })
     })
    //鼠标移入的监听事件 展示移入块的相关字段
     this.$refs.pieChart.pieChart.on('mouseover', ()=>{
       this.$refs.pieChart.pieChart.setOption({
        series:{
           label:{
             show:false, // 不将show置为false 会出现文本重叠
             formatter:(item) => { // item是遍历的每一个data数据项
             	// 格式化要展示的每个项的文本格式
               let {name} = item;
               let arr = name.split("/")
               return `{key|${arr[0]}}\n{length|${arr[2]}}`
             },
           }
         }
       })
     })
   })