echartr 饼图 hover 时各个 item 的数据在中间显式

墨语轩

于 2022-02-22 22:01:16 发布

阅读量788

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts相关文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/MFWSCQ/article/details/123078436

echarts相关专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了如何使用ECharts库创建一个饼图，包括设置pie类型的图表，调整半径，显示标签，以及自定义标签样式。示例中展示了数据项包括'名称安安'、'Direct'和'Email'，并提供了高亮强调的标签样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：

option = {
  series: [
    {
      name: 'aaa',
      type: 'pie',
      radius: ['20%', '40%'],
      label: {
        show: false,
        position: 'center',
        formatter: '{value|{c}} \n {name|{b}} \n {percent|{d}}%',
        rich: {
          name: {
            color: '#2892E8',
            lineHeight: 28,
            fontSize: 15,
            fontWeight: 'bold'
          }
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '名称安安' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
      ]
    }
  ]
};