Echarts饼图7.0：图例自定义+取消高亮时放大的状态

ᥬ 小月亮

已于 2024-08-12 14:39:04 修改

阅读量265

点赞数 1

分类专栏： Echarts 文章标签： echarts javascript ecmascript

于 2024-08-12 14:16:06 首次发布

本文链接：https://blog.csdn.net/Y1914960928/article/details/141130016

版权

Echarts 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、源代码：

let seriseData = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' }
]
option = {
  color: ['#5D9AF1', '#D6D6D6'],
  tooltip: {
    trigger: 'item',
    backgroundColor: ' rgba(0,0,0,0.4)',
    borderColor: 'transparent',
    formatter: (item) => {
      console.log('item',item)
      let html = `<div style="display: flex;align-items: center;">
        <div style="width: 8px;height: 8px;border-radius: 20px;background: ${item.color};margin-right: 10px;"></div>
        <div style="color: #fff;font-size: 12px;margin-right: 10px;">${item.name}</div>
        <div style="color: #fff;font-size: 14px;">${item.value}</div>
      `
      html += `<div>`
      return html
    }
  },
  legend: {
    show: true,
    orient: 'vertical',
    top: 'center',
    right: '10',
    formatter: function (name) {
      let arr = []
      for(let i=0; i < seriseData.length;i++) {
        if (seriseData[i].name === name) {
          arr.push('{a|'+seriseData[i].name+'}{b|'+seriseData[i].value+'}')
        }
      }
      return arr.join('\n')
   },
   textStyle:{
    rich:{
        a:{
            fontSize:18,
            align:'center',
            padding: [0,10,0,0]
        },
        b:{
            fontSize: 24,
            align:'center',
            fontWeight: 600
        }
    }
}
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      label: {
        show: false,
      },
      labelLine: {
        show: false
      },
      selectedOffset: 0,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis:{// 使用emphasis
         disabled:false, // v5.0.0开始有效
         scale:false,//不缩放,v5.0.0开始有效
         scaleSize:0,//为了防止失效直接设置未0,v5.0.0开始有效
         // animation: false, // v5.0.0以下用这个
      },
      data: seriseData
    }
  ]
};